Animation Sequence Images Free Download

[Ptolomeo Shop]

2When a user scrolls the page and when Canvas/ image animation comes at the visible part of the screen, the screen should locked and only the sequence of images should be animated on scroll.

3. The last and important requirement is that the canvas/ image height should be 300px (It should not cover the whole window)

Normally we don't provide custom solutions based on requirements list from our users. In your case this was quite simple (simple enough that you should've been able to solve it by investigating a bit )

As I mentioned above we normally don't provide custom solutions so please don't make a habit of posting a list of requirements in order to get a working solution. Also always include a minimal demo in codepen or other sandbox service (like Stackblitz) that shows what you already have.

Hi,

I am not looking into the exact solution but the gsap has plenty of features that make me confused about its usage.

I have already created the above solution and I am stuck at the canvas/ image height which looks weird on scroll. I want something like this -coty/ (The animation that is at the top). The same functionality I am looking for in the middle of my webpage. You can see below codepen code what I have done so far.

I am looking for some help/the right direction to look on as I am having this issue since last month. Thanks in advance.

See the Pen MWPQdrK by Nikhil1795 (@Nikhil1795) on CodePen

I basically want to have a sequence of images that works as an animation on scroll when it is in the viewable part of the screen. I want the canvas should cover only half of the screen and the other half should have other sections of the data (Ex: -coty/).

Have you attempted this yourself Nikhil?

The majority of the work has been done here in the demo Rodrigo provided - We're happy to provide pointers but we don't have the resources to build this out for you.

Is there a particular part you're struggling with? Why don't you start off by creating the structure you want with some simple rotation tweens as a placeholder instead of a complicated canvas image sequence - then work from there.

I want the animated part (Canvas/ image) should cover 50% of the viewable screen and also display the below/ next content at the same time.

In Rodrigo's demo example: The animated size is 50% which is good but the below/ next content (orange background) is not visible during the scroll.

The orange content appears when the scrolls are complete.

It sounds like your issue lies in understanding layout and pinning. My suggestion is to build this out without the image sequence so that you can get the correct sizing and pinning behaviour first. Then when you're happy add in the image sequence.

It is now 90% correct what I am trying to achieve. But the main problem is still as it is. Below the HTML code, we have used a div "spacer" which is having a "height:100vh" which means the animation is working based on the "spacer" and not moving in the same location. If we add some more content below and above the animation then the animation looks weird and look the content overlap with the animation.

Hey marius. Switching out the srcs is guaranteed to be slow because it will have to load the images every time you switch it. It's better to use a sprite or display/hide images. These threads talk more about this sort of thing:

I want to split this into a few sections because if I create only one image grid with all the images, that image will take forever to load. I tried copying and pasting code for the second section, but that doesn't work.

The first I tried to create animations and ScrollTriggers for each section of the page and then sync those to the correct timing with the background images. While this worked (and was easier to get pinning working), it proved to be quite difficult to keep things synced on different viewports. I had a lot of conditional values that depended on breakpoints. And when I updated the height of one section, the timings of the other sections would get thrown off. Not optimal.

The second approach, and the one we went with in the end, is making use of one big timeline for both the background images and and animations of the content. We fixed the position of the content as well and just used the timeline to reveal, "pin" (it's a fake pin just positioning things in the same place for a bit), and hide the content. I used set percentages (hand picked) for each animation so that it stays perfectly synced with the background images. I also allowed other configuration parameters (like ease, distance of translation, etc.) to be set via data attributes and used for the animations for that element. CustomEase was a big help. For some reason it helped certain browsers to use really short tweens for the background image displaying vs .set()s. The basic setup is as follows:

@OSUblake Your last Pen is the best solution so far. It works across every browser, the performance of mobile is great and I don't have to play around too much with media queries to optimize this on mobile.

If you start stripping things out (to focus on the issue at hand) you will find that when you delete the "all" section it works just fine. Looking inside of that part, there's a competing ScrollTrigger that is never removed since it's within the "all". Did you mean to put it inside of the desktop breakpoint instead?

I am using your example from above (canvas + keyframes) and I would like to know how you would enhance the code to pause the keyframe animation on specific keyframes while the text is displayed and then continue playing the animation? Apple is doing this on their AirPods Pro site right here (see screenshot for exact section): Pausing Animation on Apple Website

Hey @4nz and welcome to the GreenSock forums. Are you saying that you're using the frame object approach that I posted a demo of above? If so, to leave a particular frame up for longer you'd need to animate the frame object differently. Perhaps it'd make more sense to have different tweens in a timeline to animate that object.

Hey @ZachSaucier thanks for the welcome. Yes I am using the frame object approach and you described perfectly what I would like to achieve: leaving a particular frame up for longer (so I have time to fade in + fade out some text to describe a detail shown in that frame). Could you elaborate a little more the "different tweens in a timeline" approach? That sounds kind of doable, although I am unsure on how or where to start.

In the demo look at the tween that affects the airpods object's frame value. That's what's controlling which image is being shown. Instead of using a single tween for that animation, you likely want to replace it with a timeline of different tweens to give you more control.

I'd probably keep an object that represents what image to show. Then animate that object with the timeline (making sure to snap to the nearest whole number). Then inside of the onUpdate of the animation, if the image number changed, I would have the logic for drawing the new image over the old one.

You're saying that the first 10-15 frames would play after they load, and then the scroll-linked animation would only show the portion of the image sequence AFTER those frames? In other words, the only time users would see the first 10-15 frames would be the auto-play onload and they'd never be able to scroll up to see those again? You can't really have it both ways unless you literally force the page to scroll initially to go through those frames. See what I mean?

It's all very doable, but unfortunately we don't have the resources to provide free consulting services to build effects like this but we'd be happy to answer any GSAP-specific questions about the API or ScrollTrigger functionality, etc.

Hey thanks for getting back to me, I actually figured out a way to do it by tweening the first 30 frames on load in one render, and then having the scroll-linked animation take over after that starting at 30th frame in another render.

I have about 300 frames of animation that i need distribute to each keyframe. as in each premade frame goes to each keyframe in animate cc. i imported them to the library and selected all, then went to modify>timeline>distribute to keyframes but it was disabled (unclickable.) did i do everything correctly because i searched older forums about flash cc (old version of animate) and everything seemed to be working for other people. please i need help, im still new to the program.

if i import them to the stage then they are all pasted onto one keyframe. also, my files are named sequentially, but animate never gave me the option to import them as a sequence. (i select all from my files and click import, and it gives me a progress bar on how much has been loaded to the library. then it loads. nothing else happens.)

3a8082e126