scrollTrigger and element.clientheight

[WakuWakuCodingu]

Hi, recently i created a code with scrollTrigger that based on clientHeight( in this case is "end: '+=' + aboutInner.clientHeight," ). 

 

When I scroll down, the image animation ended up cross over to the other section(violet color part). Thus, I need write something like "end: '+=' + aboutInner.clientHeight * 0.65" to reduce clientHeight so just to make sure the animation is finished inside its intended section(palegreen color part).

 

Is the any way to allow the animation finished inside the intended section with just "end: '+=' + aboutInner.clientHeight," only and without reducing the clientHeight(like writing "end: '+=' + aboutInner.clientHeight * certain value")? And is there any explanation behind my code's "end: '+=' + aboutInner.clientHeight," ended up cross over to other parts?

 

My english isnt that good, any help will be appreciated!  Thank you!

See the Pen yLWyqPz by WakuWakuCodingu (@WakuWakuCodingu) on CodePen

[mvaneijgen]

Instead of just moving the element some amount, I think It will be much easier (and responsive) to use the Flip plugin https://gsap.com/docs/v3/Plugins/Flip/ to jump to designated points (see example below). 

 

See the Pen bGxOjeP by GreenSock (@GreenSock) on CodePen

 

For the height of the element. It is highly recommended to enable markers so that you can visually see what ScrollTrigger is doing.  Right now you're using the image as the trigger, but you want to line up things, so it is much easier to use the things you want to line up as the triggers. Instead of pin: true you can feed pin an element. And you can also define an endTrigger in ScrollTrigger, so below I've defined an element called #start and an element called #end which your ScrollTrigger uses for its call curations. You can define shorthands in the ScrollTrigger start and end properties, but when starting out I highly recommend naming all the values, so you have 100% control over what it is doing. 

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

See the Pen dyEPgwj by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi,

 

You should try using Flip Fit for this:

https://gsap.com/docs/v3/Plugins/Flip/static.fit()

 

Here is a demo using ScrollTrigger and scrub:

See the Pen JjVPyxd by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[WakuWakuCodingu]

Hi, @mvaneijgenand @Rodrigo ,sorry for the late reply.

 

Thanks for both of your reply and advice.

 

I still pretty new to gsap so bascially been only using scrollTrigger currently.

 

Flip looks like a very fun, so I will pick up flip as my next learning path.

 

Just for my interest, which are the other commonly used gsap tool  being used, so that i can plan my next learning path after finish learning flip

[mvaneijgen]

Personally when I build something it always starts with an animation, so the bases is just GSAP and if I then want to hang it on scroll with ScrollTrigger or make it draggable with Draggable (great naming schemes 😂). Personally I really like MorphSVG and DrawSVG, which are part of the Club GSAP, but with it you can make really fun animations! And keep in mind you want to try them out you can freely use them on Codepen and even on your local machine! Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

We've seen a lot of use for the Seamless Loop helper functions:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/

 

The Utility methods are well... super helpful and can make your life a lot easier:

https://gsap.com/docs/v3/GSAP/UtilityMethods

 

Also you should experiment with advanced Staggers, there are very powerful options there:

https://gsap.com/resources/getting-started/Staggers

 

@Carl has a series of videos and demos with staggers:

 

Finally, last but not least follow @PointC and check his tutorials:

https://www.motiontricks.com/

 

Happy Tweening!