Jump to content
Search Community

How to add easing and change duration

JJJ test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

I found this on codepen and it's great except I find it a bit fast and there is no easing. I tried to add duration and easing to various places in this code but it doesn't seem to make much difference in a good way, just breaks the animation. 

 

console.clear();

gsap.registerPlugin(ScrollTrigger);

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".hero",
    start: "top top",
    scrub: true,
    pin: true,
    markers: true
  },
});

//add animation code here

tl
.to('.dot', {
  y:"0",
})
.to('.inner', {
  y:"0"
}, 0)
.to('.dot', {
  scale:1,
})
.to('h1', {
  x:"0",
  duration:1
},">-0.5")
.to('.inner', {
  scale:0,
  duration:1
},"<0")
.set('body', {
  backgroundColor:'#113059'
})

 

See the Pen QWOqNVa by Anurella (@Anurella) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi there!

 

Welcome to the forums. There's no easing or duration control because the timeline is tied to the progress of the scrollbar

from the scrollTrigger docs.

 

scrub Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following
  • Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress.
  • Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out.

 

If you want the animation to take more 'time' you'll need to move the end triggers further down the page to increase the scroll distance, so it takes longer to complete.

  • Like 3
Link to comment
Share on other sites

Thanks so much for your quick response. I have adjust the scrub value to 0.5. I tried to make it more but then I didn't end up seeing the animation. Could you please elaborate on moving the end triggers further down the page, I don't really understand what you mean by that?

Link to comment
Share on other sites

the `scrub` amount is how much time you give it to delay the animation until it moves to it's end position, with `true` it will be tied to the scrollbar and if you make it a number you make it so that the animation lags behind the scrollbar that amount of seconds. 

 

If I understand your question correctly, you just want the animation to play 'slower' over a longer time. I've added a `end: "+=2000px",` to your ScrollTrigger property, this means that the end of the animation is 2000px below the start of your scrollTrigger (this is way to slow, but shows you how it works) you can play with this end value to get it to suit your animation better. 

 

See the Pen JjMLOZG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
Link to comment
Share on other sites

Thank you, this definitely seems to help in some way. I will play around with that end value and see if I can get it how I want. Will provide feedback later today.. Thanks!

Link to comment
Share on other sites

  • Solution

As noted previously the speed is going to all be determined by

  • how fast user scrolls
  • how large the scroll area is (determined by position of end markers)
  • the relative durations of all the animations to each other

another factor is easing on the individual animations. I added a power3.in ease to the large circle growing. this means it will scale at a slower rate at the beginning, but of course if the user scrolls super fast... it will still be super fast.

 

See the Pen NWXYzZv?editors=1010 by snorkltv (@snorkltv) on CodePen

 

Also consider that on a large screen the circle has to grow bigger than it would on a small screen in the same amount time also lending itself to grow faster.

 

Glad you were able to find this demo helpful. It's from my course ScrollTrigger Express, packed with over 25 lessons to help folks better understand how ScrollTrigger works and avoid the issues that commonly drive them to the forums. If you are just starting with ScrollTrigger I think you'll find it a tremendous help.

 

The mix-blend-mode works nicely to fill the text, but If you want to really replicate the effect you referenced with the color changing (black and white) check out @PointC's tutorial on svg masking

 

https://www.motiontricks.com/invert-svg-text-with-a-mask/

 

 

  • Like 4
Link to comment
Share on other sites

  • 3 weeks later...

Another question I have, how do I set the initial position of the dot? Let's say I don't want it to move down and then expand but start expanded already. Please see screenshot as an example. I set the scale to an initially larger value which helped but it still moves down to 0 on the y axis as per the javascript but I want it to start at 0 on the y axis.

 

transform: translate(-50%, -90%) scale(0.1714);

 

            .to('.dot', {
                y: "0",
            })

start.png

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