Jump to content
Search Community

Updating and using a variable with ScrollTrigger

Pata test
Moderator Tag

Recommended Posts

Hello! I'm trying to change the ease of a bounce effect according to the speed when scrolling.

I get the desired value each time but I don't know how to translate the variable "variation" to my tween every time the ScrollTrigger is triggered.

 

Thanks in advance,

 

let variation = 0
const footerBounce = gsap.to('#down', {
  duration: 2,
  morphSVG: '#up',
  ease: `elastic.out(${1 + variation}, ${1 - variation})`
})

ScrollTrigger.create({
  trigger: '#footer',
  animation: footerBounce,
  start: 'top bottom',
  toggleActions: 'play pause resume reset',
  onEnter: self => {
    const velocity = self.getVelocity();
    variation = velocity / 10000
  }
})

 

Link to comment
Share on other sites

Hey Pata. Tweens aren't meant to be changed too much after they have been created. Instead of creating a ScrollTrigger with an animation attached to it, I'd create a ScrollTrigger with no animation and then create a new tween inside of the onEnter. Something like this (untested):

ScrollTrigger.create({
  trigger: '#footer',
  start: 'top bottom',
  toggleActions: 'play pause resume reset',
  onEnter: self => {
    const velocity = self.getVelocity();
    const variation = velocity / 10000;
    const footerBounce = gsap.to('#down', {
      duration: 2,
      morphSVG: '#up',
      ease: `elastic.out(${1 + variation}, ${1 - variation})`,
      overwrite: 'auto' // make sure old tweens are killed
    })
  }
})

 

Link to comment
Share on other sites

On 11/13/2020 at 4:31 PM, ZachSaucier said:

Hey Pata. Tweens aren't meant to be changed too much after they have been created. Instead of creating a ScrollTrigger with an animation attached to it, I'd create a ScrollTrigger with no animation and then create a new tween inside of the onEnter. Something like this (untested):


ScrollTrigger.create({
  trigger: '#footer',
  start: 'top bottom',
  toggleActions: 'play pause resume reset',
  onEnter: self => {
    const velocity = self.getVelocity();
    const variation = velocity / 10000;
    const footerBounce = gsap.to('#down', {
      duration: 2,
      morphSVG: '#up',
      ease: `elastic.out(${1 + variation}, ${1 - variation})`,
      overwrite: 'auto' // make sure old tweens are killed
    })
  }
})

 

 

Thanks for the reply @ZachSaucier I have tried applying your code but I don't make it work.

It seems to work once but I can't undo the first tween to repeat it every time the element is triggered. I have tried the "onToggle" callback and it seems to work but only with basic tweens not with the MorphSVG plugin.

There's a Codepen:

See the Pen JjKzORW by pataduprins (@pataduprins) on CodePen



I hope we can find a solution! Thanks :)

  • Like 1
Link to comment
Share on other sites

Very clean @ZachSaucier. Many thanks!

 

Here it is my final version:

See the Pen JjKzqJP by pataduprins (@pataduprins) on CodePen

 

I've limited the variation variable and I had to add an extra 'box-shadow' to solve a problem with the 'overflow:visible' of the SVG that in Safari was not working properly. It's a tricky solution, probably not the desired one, but it works!

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...