scrolltrigger Pining multiple elements

[livechat]

Hi!

 

I'm trying to create an animation with few stages of pinning and multiple items being pinned. And I need help with that

 

In my example animation can be divided into two stages. In the first stage, red dots are pinned, arranged and join the blue screen. Then, in the second stage, blue screen is pinned and fully shown. What I'm trying to achieve now is for the red dots to be still pinned (after their animation is finished), along the blue screen, up until the screen animation is finished. Later on I'll add alternating animations of dots, screen, and different elements, but I narrowed it down for the sake of making the example simple.

 

I'd much appreciate any help.

See the Pen XWXPKLN by dmgawel (@dmgawel) on CodePen

[ZachSaucier]

Hey livechat and welcome to the GreenSock forums.

 

This is an... unconventional usage of ScrollTrigger. With that being said there are a couple ways that you could approach it. You could create a second ScrollTrigger to pin the dots a second time. The other method which I use in the demo below is to just change the end position of the original ScrollTrigger and accommodate for the added distance by using an empty tween:

See the Pen KKVxgEW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

By the way, there's not very many cases where applying ScrollTriggers to tweens inside of a timeline makes sense. It usually makes more sense to apply the ScrollTrigger to individual tweens (not in timelines) or to a timeline itself.

[livechat]

Hey @ZachSaucier!

 

Thank you for your reply. That is a very neat trick!

 

To better understand it I tried an approach with the first method you suggested (second ScrollTrigger for dots). However, I find it problematic to set start and end triggers. It looks like second ScrollTrigger is taking into account padding added by the first ScrollTrigger to screen element. Is it expected behaviour? How can I overcome it to use the original element markings?

 

See the Pen vYLzyRL by dmgawel (@dmgawel) on CodePen

[GreenSock]

@livechat it's an interesting edge case that exposed a bug related to pinning the same thing multiple times (some of which use a different trigger). It should be resolved in the next release, 3.4.1, which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js (might need to clear your cache)

 

Does that fix things for you?  

[livechat]

@GreenSock thanks a lot! I'm happy to hear that a). my intuition was right b). you were able to release a fix so fast!

 

Version 3.4.1 indeed fixes things for me. I was able to pin an element twice and positioning worked as expected. There is only one small issue I experienced: markers for the first ScrollTrigger are missing (animation is triggered, it's only the markers that are not working).

 

Example: 

See the Pen gOPdKVW by dmgawel (@dmgawel) on CodePen

[GreenSock]

Ah, good catch - that should be resolved in the latest beta. You may need to clear your cache. 

[livechat]

Thank you @GreenSock. Your update fixed the markers issue!

 

Thanks for the support throughout the whole topic, appreciate it.

 

As a bonus I'd like to share with you the final effect live, derived from CodePen prototypes I shared with you earlier: https://www.livechat.com/enterprise/