Jump to content
Search Community

Scrol Trigger play animation without scrub

Bohdan. test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi to all!

I need to play the animation right away without scrub control. When the trigger fires - animation play with duration.

 

gsap.timeline
.from('.image', {
  opacity: 0,
  y: 80,
  ease: 'power2.ease',
  duration: 1,
  scrollTrigger: {
    trigger: '.image',
    start: 'top bottom-=10%'
  }
})
.from('.image-2', {
  opacity: 0,
  y: 80,
  ease: 'power2.ease',
  duration: 1,
  scrollTrigger: {
    trigger: '.image-2',
    start: 'top bottom-=10%'
  }
})


Is it possible to do this without onEnter callback and animation.play()?
 

Thank You!

 

Link to comment
Share on other sites

  • Solution

Hi @Bohdan. and welcome to the GreenSock forums!

 

You are making one of the most common ScrollTrigger mistakes, which is nesting ScrollTriggers on tweens that are in a timeline:

https://greensock.com/st-mistakes/#st-in-tl

 

In this case is better to either create a ScrollTrigger configuration in the timeline instance or create two separate from tweens for each image:

gsap.from('.image', {
  opacity: 0,
  y: 80,
  ease: 'power2.ease',
  duration: 1,
  scrollTrigger: {
    trigger: '.image',
    start: 'top bottom-=10%'
  }
});

gsap.from('.image-2', {
  opacity: 0,
  y: 80,
  ease: 'power2.ease',
  duration: 1,
  scrollTrigger: {
    trigger: '.image-2',
    start: 'top bottom-=10%'
  }
});

Hopefully this helps. If you keep having issues, please remember to include a minimal demo so we can have a better idea of what could be the issue.

 

Happy Tweening!

  • Like 3
Link to comment
Share on other sites

Just FYI - A timeline is the right choice if you have a sequence of animations that are playing one after another.

In that case you'd add the ScrollTrigger to the timeline itself, like so - 
 

gsap.timeline({
 scrollTrigger: {
    trigger: '.image',
    start: 'top bottom-=10%'
  }
})
.from('.image', {
  opacity: 0,
  y: 80,
  ease: 'power2.ease',
  duration: 1,
})
.from('.image-2', {
  opacity: 0,
  y: 80,
  ease: 'power2.ease',
  duration: 1,
})


Happy tweening!

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