Ritch.b

Very helpful thank you.

That's perfect thank you.

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?

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

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

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

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... http://codepen.io/Ritch/pen/rLyajL

Hey, I have a timeline, on the end of which I want to move a SVG path "#combine" to; Move to a specific point on the page. Or preferably --- 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

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.

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.

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

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