ScrollTrigger hits end en resets to start position

[Pixel-people]

Hi Guys,

 

Sorry for not attaching a codepen, but i cant find the CDN for CSSRule to work properly.

When Scrolltrigger hits the end of the trigger element it looks like the animation will go to the starting position.

 

Is it possible to hold the current state when scrollTigger end is hit / out of view

 

Code example timeline:

let tl = gsap.timeline({

  scrollTrigger: {

  trigger: shade,

  start: "top center",

  end: "bottom bottom",

  pin: false,

},

});

 

Code from position:

tl.from(background, {

  width: "0",

  duration: 1,

  ease: "elastic.out(1, 0.3)",

});

 

Current CSS

&:before {

  width: calc(100% + 1.5rem);

  left: -20px;

  background-color: $primary;

}

 

Issue: after the end hits, the animation will set back to the from position, but i want to hold the current CSS position.

 

[Rodrigo]

Hi @Pixel-people,

 

The CSS Rule Plugin has been deprecated:

https://greensock.com/docs/v3/Plugins/CSSRulePlugin

 

Also please provide a minimal demo, since is really hard to visualize what you're trying to achieve here with just the small snippets you posted, they don't give us the whole picture of your setup. For example what are the styles of background? What element that is?, etc.

 

Happy Tweening!