ScrollTrigger problems

[Andy777]

Hi.

 

I don't know how to repeat the animation of the blank div when the element is in the viewport between start/end markers.

 

 

See the Pen eYrKxdv by Andy199807 (@Andy199807) on CodePen

[Rodrigo]

Hi,

 

Are you talking about something like this?:

gsap.to(".about", {
  y: -50,
  opacity: 1,
  duration: 1,
  repeat: 2,
  yoyo: true,
  scrollTrigger: {
    trigger: ".about",
    start: "top center",
    end: "bottom center",
    toggleActions: "play none none reverse",
    markers: true
  }
});

If not, please be more specific as to what you intend to do in order to find the best possible approach for it.

 

Happy Tweening!

[Andy777]

No @Rodrigo, i think that the solution is in toggleActions.

 

When user scroll and enter in the markers of the div (from top to bottom or from bottom to top of the page) the animation of the property opacity starts.

 

Sorry my english.

[Rodrigo]

Hi,

 

You mean this:

gsap.to(".about", {
  y: -50,
  opacity: 1,
  duration: 1,
  scrollTrigger: {
    trigger: ".about",
    start: "top center",
    end: "bottom center",
    toggleActions: "play reverse play reverse",
    markers: true
  }
});

No need to apologize for the language barriers

 

Happy Tweening!

[Andy777]

I mean exactly this, thanks!!

 

[Andy777]

What does it means the fourth options in toggleActions @Rodrigo? I mean each part at what is related?

[Rodrigo]

Hi,

 

You can check the docs to find out more about Scroll Trigger:

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

 

From the ScrollTrigger docs:

• onEnter: When the scroll position moves forward past the "start" (typically when the trigger is scrolled into view).
• onEnterBack: When the scroll position moves backward past the "end" (typically when the trigger is scrolled back into view).
• onLeave: When the scroll position moves forward past the "end" (typically when the trigger is scrolled out of view).
• onLeaveBack: When the scroll position moves backward past the "start" (typically when the trigger is scrolled all the way backward past the start). 

Happy Tweening!