Jump to content
Search Community

Timeline not reversing fully

Alphamark test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

The sentences on the right fill up when the "Sysfacts" word aligns with them, and reversing to lower opacity when it leaves. Not always, but sometimes the timeline.reverse() isn't reversing fully. You can see what i mean in the screenshot below

 

I'm using scrolltrigger and splittext

I'm sorry i don't know how to replicate it in codepen but here is my code

 

const splittedText = SplitText.create(text, {
          type: "words chars"
        })

        gsap.set(splittedText.chars, {
          opacity: 0.05,
        })

        const sentencesAnimation = gsap.timeline({
          scrollTrigger: {
            trigger: sentence,
            start: "40px center",
            end: "bottom-=40px center",
            onLeave: ()=> sentencesAnimation.reverse(),
            onEnterBack: ()=> sentencesAnimation.play(),
            onLeaveBack: ()=> sentencesAnimation.reverse(),
          },
        })
        .to(splittedText.chars, {
          opacity: 1,
          duration: 0,
          stagger: 0.01,
        })
      })

 

 

See the Pen qBypONb by Bobiman (@Bobiman) on CodePen

Link to comment
Share on other sites

Hi @AntonioSt and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GreenSock!

 

It's really hard for us to debug something based on a snippet and an image. You can fork this codepen and make it look like your setup:

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

 

Just keep it as small and simple as possible. No need to add your entire site code, just the pertinent part.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

I couldn't find your issue in your pen, but did you know that you can use the toggleActions property for what you're doing with the call backs

 

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

From the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

I don't know on the top of my head, but maybe this is more performant. 

See the Pen wvxpKQQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Where there any steps to reproduce the issue like the following 

  • I am expecting the purple div to spin 360degrees
  • the purple div only spins 90deg
  • Open the demo on mobile in IOS safari and scroll down to the grey container
  • Like 1
Link to comment
Share on other sites

I see it now, can you maybe provide your browser version. I'm on Safari 16 and there it never happens, but in Chrome 109.0.5414.87 it does. For me it only happens when I flick my scroll wheel really fast, so if you have a better description on how to reproduce the issue, that would be really helpful

Link to comment
Share on other sites

Ah I see, but is there any other way to reproduce the typewriter like effect, because with 0.1 duration it has like a fade.

 

Edit: 
Nevermind, I just put the duration to 0.0001 and it works. Thank you a LOT

Edited by Bobiman13
Nevermind
  • 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...