Jump to content


ScrollTrigger animation again :)

Recommended Posts

Hi, this is me again I fixed all the notes you told me about yesterday and make  my code as small as possible.

but I still have issues with my code and some points I didn't understand even I read the documentation and see many examples .

1- the third section which includes the hands didn't appear and the animation not start I stuck on from although I delete the visibility 

2- the flower which is move on the dashed path at some point it disappear and not continue the movement .

3-and the big problem for me is the values of start and end of the animation and to be honest curranty I try  random values  until reach the value I want. 

what I mean I want the animation in every section not start until the user see this section and when I use to repeat the animation when the user come back again to the section to  happened smoothly not suddenly items disappear and show again please help me to understand how to control the start and end of the  animation with scroll Trigger   plugin 

See the Pen wvqQWgQ by roleno (@roleno) on CodePen

Link to comment
Share on other sites

Hi @rala. We're happy to answer any GSAP-specific questions here, but these forums aren't really for providing free consulting services like "here's my demo with 800+ lines of HTML/CSS/JS and here's a list of requirements and problems...please tell me how to fix it." That could easily take hours of work to wrap our heads around all that you're trying to do in there, how you've structured things, isolate the logic problems, and offer specific solutions.


From what I can see from a quick scan, this is very likely due to various logic issues in your code. 


Some things that struck me as potentially problematic:

  1. You're creating a bunch of ScrollTriggers that literally do nothing at all in a sections.forEach(). 
  2. You only have one functional ScrollTrigger (on #lily). 
  3. You're putting EVERYTHING into a master timeline which doesn't have a ScrollTrigger, so I wonder if you're expecting that big animation to somehow get triggered? 
  4. You have some unused parameters, like "to" in displayMountain(). 🤷‍♂️
  5. You're adding a "float-papers" class to the body at the end of 9 different tweens (so you're doing it 9 times)
  6. You have some duplicate code like var tl = makeVisible(target);  var tl = makeVisible(target);
  7. You're using CSS animations. Be VERY careful about that - don't animate the same element with GSAP and CSS because they'll conflict. 

If you need more help with this and can't provide a minimal demo with only a few lines of code, you'll probably need to hire someone to help work through the issues on a custom consulting basis. 


Good luck!

Link to comment
Share on other sites

Hi, I don't want any one to fix my code I try a lot  of the examples on the code pen when start learning gsap and I thought I understand everything about it and I decide to do my own project to see if I can start every thing from scratch but now after your notes I notice that there are a lot off things that still not obvious for me and that is what I want from support also I ask about specific sections in my project the flower along the dashed path and the third section which stuck on from and not animate 

anyway thank you 

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.