Jump to content
Search Community

Slowdown animation speed by scrolling

redirex test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

I have svg mask and i want do second part animation slowly than first part. When my mask have big scale i want decrease it faster but when my logo contain to screen i should decrease speed of animation.

Now my animation have same speed along all animation cycle.

How is it work now: https://ko-ketka.com.ua/noar/index.html (sorry that it's not codepen i can't paste my code :( )

 

So that's my code: 

let windowWidth = window.innerWidth
var t0 = gsap.timeline({
    scrollTrigger: {
      trigger: ".header-section",
      scrub: true,
      pin: true,
      start: "top top",
      end: "+=100%",
      markers: true,
    }
  });
t0.from(".header-section .overscreen .logo_mask", {"mask-size": (windowWidth*18)+"px", "-webkit-mask-size": (windowWidth*18)+"px"})
.to(".header-section .overscreen .logo_mask", {"mask-size": "814px", "-webkit-mask-size": "814px"})
 

 

Link to comment
Share on other sites

  • Solution

Hey - so right now your tweens are both the default duration - 0.5seconds.

If you want the second one to last longer you'll need to change the duration - something like this.

 

t0.from(".one", { duration: 1 })
.to(".two", {duration: 2})

 

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