Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kevchcm

Remove scrub of single tween from Timeline ScrollTrigger

Go to solution Solved by ZachSaucier,

Recommended Posts

Hey guys I have a question and I wanted to know if this is possible to do.

I have a timeline with a ScrollTrigger

gsap.timeline({
  scrollTrigger: {
    trigger: element,
    scrub: 0.5,
    start: 'top bottom-=15%',
    markers: true
  }
})
  .to(element, {yPercent: -100})
  .from($(element).find('.heading'), {yPercent: 20}, '<')
  .from($(element).find('.description'), {yPercent: 20}, '<')
  .fromTo($(element).find('.svg-path'), {drawSVG: "0"}, {duration: 1, drawSVG: "100%"})
  .to(element, {opacity: 0}, '>-0.2')

On this timeline I have multiple tweens, one of those is a drawSVG, but I don't want that svg animation to be attached to the scroll, so basically I just want the animation to appears once the svg is on the viewport.

It's there a way to separate that single tween from the ScrollTrigger scrub? Or do I have to make another ScrollTrigger just for that drawSVG animation?

Link to comment
Share on other sites

  • Solution
15 minutes ago, kevchcm said:

do I have to make another ScrollTrigger just for that drawSVG animation?

That's the way to go :) 

  • Thanks 1
Link to comment
Share on other sites

55 minutes ago, ZachSaucier said:

That's the way to go :) 

That's what I thought but I just wanted to confirm, thank you!

 

I have a follow up question on the drawSVG plugin

See the Pen bGBjRmR by godhandkiller (@godhandkiller) on CodePen

I have this code pen where is kinda like a timeline, so the section in the right the svg draw is working correctly because it's starts from the center to the right

 

But the left side is wrong, it should start from the center to the left.

It's there a way to do that?

Link to comment
Share on other sites

That has to do with your path direction. You can go from 100% to 0% for the left side. Or just edit the path direction as this post covers.

  • Thanks 1
Link to comment
Share on other sites

14 minutes ago, ZachSaucier said:

That has to do with your path direction. You can go from 100% to 0% for the left side. Or just edit the path direction as this post covers.

I had no idea the svg had direction! Thank you for the tip, I was able to change my svg and now the animation works as intended

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.

×