Jump to content
Search Community

Remove scrub of single tween from Timeline ScrollTrigger

kevchcm test
Moderator Tag

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?

  • Like 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?

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

  • Like 1
Link to comment
Share on other sites

  • 8 months later...

Hey,

 

I was actually wondering if I can disable scrubbing inside of an existing timeline as well. as you can see in the following codpen, it works by creating a custom standalone scroll trigger on the same element, but is not working as expected by directly using it inside of the timeline. Am I missing something here?

 

See the Pen XWawjrG by daniel-brolli (@daniel-brolli) on CodePen

 

PS: the reason I'm using that many timelines, is due to the fact, that my real project is setup in such a way. I just got rid of all the unneeded things

  • Like 1
Link to comment
Share on other sites

It looks like you're making one of the common mistakes. It would be logically impossible to have nested ScrollTriggers like that. Think of it this way: the playhead of the parent timeline always controls the playheads of the children (so they're all synchronized); ScrollTrigger scrubbing is like linking the page's scrollbar to the playhead, so it's scrubbing the master but you're ALSO trying to have the scrollbar control the playhead of the child animation, thus you'd have the parent's playhead fighting for control with the scrollbar. It can't be two places at once :)

 

Summary: never have a ScrollTrigger on an animation that's nested inside another animation. 

  • Like 1
Link to comment
Share on other sites

thanks for the reply. I was kind of aware of that. but creating a standalone scroll trigger on the same element, but not on the timeline, works as intended. isn't that kind of the same thing.

 

The problem I'm trying to solve is, that I have a surrounding scrolltrigger responsible for drawing an animation on a canvas and have certain container appearing synchronized with that, but with absolute values as duration and not linked to the scrubbing scrolltrigger. So my initial idea was to define a parent timeline with scrubbing true, have a tween on that timeline responsible for updating the frames and furthermore add more tweens with scrubbing turned off.

 

is there any easier solution I'm missing here? 

  • Like 1
Link to comment
Share on other sites

2 hours ago, d_lobsn said:

I was kind of aware of that. but creating a standalone scroll trigger on the same element, but not on the timeline, works as intended. isn't that kind of the same thing.

 

No. It's just one animation/timeline per ScrollTrigger. You can have as many animations and ScrollTriggers as you want on an element.

 

gsap.to(".foo", {
  x: 400,
  scrollTrigger: {
    trigger: ".foo",
    scrub: true,
  }
});

gsap.to(".foo", {
  rotation: 360,
  scrollTrigger: {
    trigger: ".foo",
    scrub: false,
  }
});

 

  • Like 1
Link to comment
Share on other sites

ok, got that. but what would be the best approach to have for instance two tweens which should be sequential the first should be controlled by scrubbing and the second should have an absolute time span, but both on the same element. with the example @OSUblake posted, the tweens are not on the same timeline. it seems like my head is somewhere stuck in the concept :D

 

 

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