Jump to content
Search Community

Section counter

Kelimino test
Moderator Tag

Go to solution Solved by Shaun Gorneau,

Recommended Posts

  • Solution

Hi @Kelimino,

 

A few things that stand out to me are 

  1. You're recreating the timeline multiple times rather than adding tweens (or other timelines) to it
  2. While call() would work here on appending tweens/timelines, you are appending it to a single timeline each time that timeline is recreated
  3. Unrelated to the issue; if you define a from() tween, it will perform that tween from the defined property values to the element's current values, so you don't need to follow up with a to() tween ... unless your defined end target values that are not the values in place before the from() is called.

I think an easier way to handle this would be with ScrollTrigger.create() and not make use of any timelines (along with not worrying about defining any toggleActions). I think it's easier to use the callbacks onEnter and onEnterBack to update the counter and perform a simple tween on it.

 

Also, adding end points gives you better control over when to trigger onEnterBack for better usability. Without defining them here, onEnterBack into slide 1 would not be triggered because the scroll can't reach the trigger point.

 

Have a look here,

 

See the Pen KKaEgvZ?editors=0010 by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

 

  • Like 4
Link to comment
Share on other sites

Hi Shaun,

 

A big thanks for your answer and explanation. Several things that i didnt catch:  scrollTrigger.create, onEnter/Back, and a gsap function. I need to look further at it and not only the basics of gsap. 

 

Many thanks again.

Have a nice Day 

  • Like 1
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...