Pata Posted November 13, 2020 Share Posted November 13, 2020 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 More sharing options...
ZachSaucier Posted November 13, 2020 Share Posted November 13, 2020 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 More sharing options...
Pata Posted November 16, 2020 Author Share Posted November 16, 2020 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 :) 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 16, 2020 Share Posted November 16, 2020 In order to get it to play again you need to reset the state. Either use a .fromTo() instead of .to() or a .set() in the onLeaveBack callback to do that. I'd probably set it up this way: See the Pen bGeZvpO?editors=0010 by GreenSock (@GreenSock) on CodePen Neat effect! 2 1 Link to comment Share on other sites More sharing options...
Pata Posted November 17, 2020 Author Share Posted November 17, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now