[ScrollTrigger pin scrub is not working like it was wished]

15 hours ago, mvaneijgen said:

Ha, no... I thought maybe it was hard to explain. You could wrap each icon in its own group <g> this way you can animate the element twice, once as the element it self and once as the <g> element. See my code below, you just create extra <g> elements just so that you have something to target

 

<g class="animateMe">
  <path class="someIcon"/>
</g>
<g class="animateMe">
  <path class="someOtherIcon someIcon"/>
</g>

This way your first timeline could target all the .someIcon's and animate them and the scroll timeline could animate all the <g> .animateMe elements, this way the targets don't overlap and your timelines will not fight for the same elements 

Sorry for my late replay...

 

Now i understand what you suggested, sounds a bit easier to keep track of whats going on in the functionality, will definetely try that in later animations.

 

Thank you really much for the help!

[ScrollTrigger pin scrub is not working like it was wished]

2 minutes ago, mvaneijgen said:

When I know I need to animate the same element multiple times I'll try and structure my SVG accordingly. If you for instance wrap all your scaling icons in a <g> tag and at first scale everything within the <g> tag and on scroll animate the <g> tag itself they don't conflict with each other. The benefit of this is that the visitor doesn't have to wait before they can scroll, but it requires you to go in a restructure your SVG.

I don't understand what you mean, so you scale up the whole group of these elements first, and after that, you are animating the single objects? In that case, I have a <g> tag object where all my icons are nested inside... Would it be better that first animate the whole group and after all make the icons fly away individually? 😅

[ScrollTrigger pin scrub is not working like it was wished]

4 minutes ago, mvaneijgen said:

I think because you are creating your two timelines simultaneously and animating the same elements, they are both fighting for control.

 

I've added your ScrollTrigger timeline to your first timeline on it's completion. Now your scroll timeline will be created when your first animation is completed. 

 

 

 

Thank you very much that was my mistake, sometimes it's a bit overwhelming to keep track of timelines as a beginner

[ScrollTrigger pin scrub is not working like it was wished]

Hello to everybody,

 

I did this Animation and now I want on the scroll that the icons "fly away". What is my mistake here? Also, the Animation is not reversed if I scroll back.

See the Pen oNqPzoO by libertey (@libertey) on CodePen

[scrolltrigger changes the background of all elements to the background of the first occuring]

Hey, I'm new to gsap and so I tried to do the tutorials here on the website, I'm stuck at that

 

Preview (from GSAP):

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

 

so I understand what it is doing but I don't understand why it is changing the bg-color from every element. Help is appreciated!

 

BG Paul

 

Preview (mine):

See the Pen jOzGKjv by libertey (@libertey) on CodePen