Slowly play animation and speed up on scroll event and also reverse

[gabriel.ortiz]

Hey yall,

 

I'm new to greensock, and I love the library and this forum. This forum has especially been helpful as I practice and learn gsap technique.

I have a new project that is supposed to animate a background SVG, and it has the following requirements:

1. The background diagonals are supposed to slowly move downwards, kind of like a parallax effect. It's a big SVG with lines running across it
2. When the user scrolls, it supposed to speed up the parallax progress a little bit with some easing, but continues to progress down the timeline
3. When the user scrolls upwards, its supposed to reverse the tween timeline

 

I've been able to achieve a few things, but the things i'm still having trouble with are Reversing the scroll direction with the scroll event is upwards.

Also right now, I have the progress of the scroll animation tied to the height percent of the `window.innerHeight`. but after testing, i don't think this is a good idea.

Because the window height percent is not compatible with the progress of the timeline. So i should find another way to progress the timeline.. but i'm not sure what.

 

For reference I used this post to get started, which as been really helpful:

If anyone has advice from doing something similar to this, please please let me know. My knowledge is not advanced enough to debug. Thank you Thank you!! PS please excuse the messy code, i'm just trying to get this thing working.

 

Best,

Gabriel

See the Pen WNbjYXm by gortiz022 (@gortiz022) on CodePen.

[Sahil]

See the Pen OJPmedr?editors=0010 by Sahil89 (@Sahil89) on CodePen.

 

You may want to use infinite loop like in this demo this demo and apply this logic on it instead of using such large svg, because after some idle time there is nothing to animate.

 

hi @ZachSaucier even if I add codepen as link, it gets embedded. (second demo was supposed to be link)

[ZachSaucier]

9 hours ago, Sahil said:

even if I add codepen as link, it gets embedded. (second demo was supposed to be link)

Correct, this is the way that it's setup to be even if you use it as a link because generally we want them to be embedded. To work around that behavior, use a link like: https://cdpn/.io/QEdpLe. I edited your post above to use that format.

[gabriel.ortiz]

@Sahil Terrific!! thank you so much! i understand what i was missing. From here I'll work on making it infinite.

 

I really appreciate this!

 

[gabriel.ortiz]

@Sahil hey i was wondering, since this animation is based on scroll, do you have any performance optimization recommendations? For starters, I put a throttle on the window scroll event of 150ms. So the scroll function has a slight delay to reduce throttling

 

Sometimes i notice a lag and a delay in animation when i'm interacting with the background. I suppose i could reduce the FPS... do you have any other thoughts?

 

Thanks so much, i really appreciate your expertise!

 

-Gabriel

[ZachSaucier]

Throttling the scroll function would probably be the biggest improvement. 

 

Another thing you could do is get the values of documentHeight and windowHeight only on load and resize. Maybe also try using force3D: true in your tween.