Jump to content
Search Community

ScrollTrigger pin scrub is not working like it was wished

slyrt test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

  • slyrt changed the title to ScrollTrigger pin scrub is not working like it was wished
  • Solution

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

 

I've add your ScrollTrigger timeline to your first timeline on it's completion. Now your scroll timeline will be created when your first animation is completed and they no longer fight for the same elements. 

 

See the Pen mdxGrZP?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 2
Link to comment
Share on other sites

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 :D

Link to comment
Share on other sites

@slyrt you're doing a great job with keeping your timelines separate within functions. The problem is with trying to animate the same elements with different timelines.

 

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.

 

It's up to you what you find best. Good luck!

  • Like 3
Link to comment
Share on other sites

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? 😅

Link to comment
Share on other sites

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 

  • Like 3
Link to comment
Share on other sites

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!

  • Like 2
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.
×
×
  • Create New...