Jump to content
GreenSock

Guest

Video Scroll Animation

Recommended Posts

Where can I find a tutorial or maybe docs or blogs where I can learn how to make a video be animated on scroll. Like every time I scroll the video runs 1 or 2 frames. 

I am also interested in animating movement of elements on scroll.  Let's say I have 3 card and as I scroll the care apea one by one when I scroll from a position of X= -100 to X= 0 while the hole scrolled is sopped. In other wards when the uses get to a point the normal scroll stops and as they scroll the card move from right to left raveling themself and moving into their position and ten the normal scrolling behavior start again.  An example would be https://zoox.com/ .

Thank you! :D

 

Link to comment
Share on other sites

 

Hello @CodyHill

 

I don't think there is an absolute one-way-fits-all solution, so things will probably depend a lot on how exactly you imagine things to be working and how advanced your understanding of ScrollTrigger, JS and video-processing is, in general.

 

While we don't offer tutorials for effects you might have seen on other websites in this forum, searching the forums (and codepen.io, too) is always a great start for finding examples for different effects.

 

For instance, here is a pen showing how to smoothly scroll through a video via ScrollTrigger...

 

See the Pen 9e810322d70c306de2d18237d0cb2d78 by shshaw (@shshaw) on CodePen

 

 

 

...but be aware that for it to be working smoothly, things mostly come down to using the correct codec/encoding of the video.

 

These other links/threads might be helpful with that regard...

 

https://blog.video.ibm.com/streaming-video-tips/keyframes-interframe-video-compression/

 

 

 

 

 

...and this one here also contains a helper function by @GreenSock for scrubbing through video via ScrollTrigger.

 

 

 

 

If you're having trouble with getting things properly setup for your videos being scrubbed through smoothly, you might want to consider going down a different route, scrubbing through sprites / image sequences instead...

 

 

 

 

 

...with this here probably being the most popular thread with that regard, recreating Apple's Airpods Website...

 

 

 

 

...and these here are my takes on an explanation of what is going on in that Airpods example...

 

 

 

 

...and an approach for better understanding how to possibly add some text animations to it.

 

 

 

 

As mentioned, things will heavily depend on how advanced your understanding of ScrollTrigger is. If you understand how the basic principles work and have a decent understanding of how to create the proper setup & logic for your needs around ScrollTrigger, i.e. your HTML/CSS/JS and asset preparation, almost anything is possible - if it is not logically impossible.

 

For getting a good grasp of ScrollTrigger's core principles, I'd suggest @Carl's ScrollTrigger Express course - and since ScrollTrigger is tied to GSAP, signing up for his Creative Coding Club will benefit you in general, as he also offers great courses for GSAP in general, and understanding GSAP's basics is sort of a pre-requisite for understanding ScrollTrigger.

 

 

 

1 hour ago, CodyHill said:

I am also interested in animating movement of elements on scroll.  Let's say I have 3 card and as I scroll the care apea one by one when I scroll from a position of X= -100 to X= 0 while the hole scrolled is sopped. In other wards when the uses get to a point the normal scroll stops and as they scroll the card move from right to left raveling themself and moving into their position and ten the normal scrolling behavior start again.  An example would be https://zoox.com/ .

 

As for that part; I'm not sure I understand what it is, you are asking here. On that website you linked, I don't see any scroll-triggered tweens or scrolling on the x-axis as you are describing.

 

So if for that question you could maybe try and re-formulate what exactly you are having problems with, alongside a minimal demo of what you have tried so far, maybe somebody will be able to help. Best would be, to also create a new thread for that question, as this does not have much to do with the title of this one, and it might be more helpful for others in future too, if that question would be topic of a different thread.

 

But as I already mentioned above - be aware that this forum is not intended for providing 'how do I do this special effect I saw somewhere else' custom-code solutions and tutorials, as the forum guidelines state.

 

If you do have any GSAP specific questions or get stuck at an approach of yours, we'll be happy to help and/or nudge you in the right direction.

 

In the meantime, maybe this thread might be somehwat helpful with regard to that description of yours concerning the cards.

 

I hope all this will be helpful. Happy scrolling and even happier tweening!

 

 

  • Like 1
Link to comment
Share on other sites

@akapowl Thank you very much for the vast answer!

21 hours ago, akapowl said:

 

Quote

As for that part; I'm not sure I understand what it is

 

I will create a new thread and I will proved a codepen.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×