[Scrollto - how to enable a user to scroll back up past a trigger point?]

Very helpful thank you.

[Scroll to a div using a class?]

That's perfect thank you.

[Scrollto - how to enable a user to scroll back up past a trigger point?]

Hey thanks for your response Petr and also thanks for creating all of your video tutorials! 

 

I havn't tried that, as I want the animation to run multipule times and to reverse, but if it's possible - to only trigger the scrollto animation when a user moves from top to bottom. So if a user moves back up the page, the scrollto is ignored. Is this even possible?

[Scrollto - how to enable a user to scroll back up past a trigger point?]

Hi,

 

In my codepen I am using ScrollMAgic to trigger a scrollto. The issue is when you scroll back up, it triggers again and forces you back down. How do I disable the trigger, but only in the up direction?

 

What I mean by this is, I want to disable the trigger when a user scrolls up, but have it fire again when a user scrolls down.

 

Thanks

See the Pen rLyajL by Ritch (@Ritch) on CodePen

[Animate SVG path - fix/pin to top]

I've realised that the functionality I was working towards isn't what I needed.

[Scroll to a div using a class?]

Hi,

 

Is it possible to use the scrollto plugin to scroll to the top of a div based on its class or ID rather than a numeric x y position?

 

So something like...

.to(window, 0.8, {
    scrollTo: {
      >DIV CLASS or ID HERE<,
      autoKill: false
    },
    ease: Power2.easeOut
  });

Thanks

 

See the Pen rLyajL by Ritch (@Ritch) on CodePen

[Animate SVG path - fix/pin to top]

Thanks for the y tip Jonathan. Unfortunatley the suggested method hasn't had any effect on moving the SVG to where I need it to go.

 

The ribbon shape transforms into a background for a menu, which I then need to be able to pin to the top of the viewport, so it becomes fixed, behind the navigation/logos etc... 

 

[Animate SVG path - fix/pin to top]

Hey,

 

I have a timeline, on the end of which I want to move a SVG path "#combine" to;

 

1. Move to a specific point on the page. Or preferably ---
2. Pin to the top of the viewport.

I've tried using:

.to("#combine", 2, {top:"910px", ease:Power2.easeInOut});

and aslo ScrollMagic's setPin

.setPin('#combine')

Any ideas where I am going wrong?

 

Thanks

See the Pen rLyajL by Ritch (@Ritch) on CodePen

[I can't get a morph to tirgger with ScrollMagic.]

Thank you so much! That's working as I would expect at this point now!

 

But can you explain what animation.gsap.js is doing? I assume its a ScrollMagic Plugin as I've not seen this referenced in any of the GSAP documentation?

 

Thanks again.

[I can't get a morph to tirgger with ScrollMagic.]

Thanks,

 

You're right about the morph - The route I am going to take is to fade out the #st0 and #st1 layers - leaving the #combine layer which I will then morph into another shape. But before I do that I need to get the morph to work on scroll.

 

I've made the changes above - but now the morph is starting before the trigger is even reached.

[I can't get a morph to tirgger with ScrollMagic.]

Hey thanks so much for the quick response, I'll give those changes a go and see where I get to.

[I can't get a morph to tirgger with ScrollMagic.]

Hi All,

 

I'm fairly new to JS, so I'm sure I've made a silly mistake.

 

But I am unable to get a morph tween to trigger using ScrollMagic. What I want to do is fairly simple, I have an svg ribbon made up of three paths, I want to morph the first two into the third as a user scrolls.

 

I've watch and read lots of tutorials, but can't see where I am going wrong.

 

Thank you in advance.

 

Ritch

See the Pen rLyajL by Ritch (@Ritch) on CodePen