Sonya.Ninja

Thank you Dipscom!

You rock! Thank you so much. I'll google $el and see what I find. Don't worry about being wrong - your reputation is intact. I've seen hundreds of threads where you got everything correct.

Shucks! I think I've figured out why if wasn't working. I'm such an idiot! I had multiple components on the same page: <Card myProp="10"/> <Card myProp="20"/> <Card myProp="15"/> <Card myProp="30"/> I think my animation was showing - hiding - showing - hiding. The final result was hidden. How do I handle timelines for each version of the component individually? When I only have a single version of the component then the .from statement works as in the codepen.

Thanks for the effort to help me.! I must be missing something. Here is a Codepen where the same .from statement is working perfectly. It just doesn't seem to work with svelteKit. https://codepen.io/sonya-ninja/pen/zYNaVJB

Thanks for the response Dipscom! I'm confused .... How do I understand this then? (https://greensock.com/docs/v2/Plugins/CSSPlugin)

@Dipscom Thanks for these examples guys! I've installed GSAP in my svelteKit project using pnpm. For some reason, using tl.from does not work in svelteKit. When I use tl.fromTo or tl.to my test animates as expected but when I use tl.from the .text div remains hidden. Here is my component: <script> import gsap from 'gsap'; import { onMount } from 'svelte'; onMount(() => { const tl = gsap.timeline(); // Works tl.to('.test', {duration:1, autoAlpha:1, scale:1.5},">"); // Does not work // tl.from('.test', {duration:1, autoAlpha:0, scale:0},">"); }); </script> <div class="content"> <div class="test"></div> </div> <style lang="scss"> @import "../theme.scss"; .content { .test { width: 100px; height: 100px; background: red; border-radius: 50%; visibility: hidden; } } </style>

YES YES YES YES!!!!!! Thank you!

Hey Zach! There you Are! I'm not going to add WebGL to this project - I already feel like God using GSAP - animating everything in the universe. I went a bit overboard on the project (NOTHING is stationary - everything moves!) and now I'm trying to simplify. I just wanted the illusion of a banner curving around the sphere - it's not a train-smash. I'll figure out a different effect for this one (perhaps something like what PointC suggested). WebGl would be fun though - perhaps for the next project. Have an awesome Saturday!

I'm so amused - it's the first time someone other than Zach has replied! I've just had a whisky so I'll re-think these solutions when I'm less tipsy. No more coding for me today! The vertical solution may just be a working compromise. I'm most interested though, in how you managed to make the scale animation happen in the middle of my planet - my brain is too fuzzy to understand what you did, but it seems as though it has something to do with animating the stagger from the centre? I'll sober up then look again. Thank you SO much Mikel (and PointC) for the ideas!

Hi Zach! (because he always answers me first) I have this damn planet with a banner of text that I need to "curve" around it. I've split the text and was hoping to apply a stagger to animate the scale of each letter as it slides across the planet but, of course, they either scale all at once or one at a time. Am I using the wrong GSAP technology for what I want to achieve? Thanks (always) for the excellent support!

Okay - thanks so much - I'll follow your advice and rework the codepen until I can reproduce the error.

Thanks for looking Zach! (Edit: I've only tested in chrome on macbook) When I scroll fast back from the "Our Story" section then the little animated logo doesn't get his size back and his position goes to the centre of the spheres. I've attached two screenshots: The one where he is on the left and slightly bigger is the expected response (slow scroll). The one where he is smaller and in the centre is the broken reverse - fast scroll.

Hello! I did try and make a simplified code pen for this issue but I can't reproduce the problem. Scrolling slowly in, out, back, past... reverse works perfectly. Scrolling fast into a specific section and then back breaks the reverse animation. Here is the published site on github: https://sonya-ninja.github.io/EMIT-Front/ Here is the js file: https://github.com/sonya-ninja/EMIT-Front/blob/master/js/ninja.js Here is the html: https://github.com/sonya-ninja/EMIT-Front/blob/master/index.html To reproduce the issue: scroll slowly into the "Our Story" section and back again: should animate reverse smoothly and correctly. scroll quickly into the "Our Story" section and back again: position and scale does not reverse correctly. Sorry again that this is not a codepen - please tell me if I should create a codepen that duplicates the entire page.

That is perfect! Thanks so much!

Hey Zach! It's not working. Try scrolling. It is supposed to smoothly animate to the starting position and animate the progress of the color change while doing so. The drag part works but I didn't get the animate-to-starting-position to work. The drag-handle tweens to the start (that's okay) and then I've put this ugly line in on the scrolltrigger timeline (right at the end of the js): tl.call(closestPoint, [path, pathLength, { x: 143.0357, y: 492.263 }], ">"); That causes a jump to the tl progress - it's not a nice smooth update of the timeline progress when it scrolls into view. I actually wanted to get the value for the beforeLength out of Blake's function and call the update function separately, but I don't know enough about js to figure out how to get that variable outside of Blake's closestPoint() function. Thanks for replying! S

Hi guys, Thanks for this example. I've used Blake's code but I need help animating the draggable to a starting position white controlling a timeline - this should all be triggered by scroll. I hope this is not a big ask! This is what I have so far - I know it's a terrible hack - please help! - I called an update() function from Blake's closestPoint() and sent the beforeLength as a variable. - The update() function animates the progress timeline and draws the progress path. (This works when dragging the handle) Main Problem is how to animate the starting position when the section scrolls into view. Here is my pen (I removed as much as possible from the original site, but it's still quite long. Sorry!): https://codepen.io/sonya-ninja/pen/YzwrXwb?editors=1011

Okay thanks. I don't want more work than it's worth!

Hi Zach! Thanks again for the explanation. I followed your advice: updated the gsap version, changed my syntax to use the GSAP 3 way of formatting, put all tweens in a tl so that the position parameter works. The pen is updated and seems to be working (sort-of). - I realised that removing the 'active styling' from all the nav items before applying the active styling to the current item was a bit redundant (and very confusing) when I can simply reverse the animation. (A bit like a double negative.) I'm still trying to figure out how to do this: CLICK - Animate the nav styling only once - before scrollto SCROLL - Animate the nav styling for each section I'd be grateful if you could point me in the right direction. Thanks! The pen

Thanks so much for all the advice Zach! I don't understand some of what you said, but I'll go through your points one at a time and implement them. You rock! Oh... and yes, I removed some of the animations to make the pen simpler and forgot to remove them from the main timeline.

Hi there! I'm a newbie - been struggling to get this working for a week now. I've created a function that animates the styling of the clicked nav-link. I also created a timeline with a scroll trigger that is supposed to call the same function when each section scrolls into view. (This is the part that's not working.) I think my mistake has something to do with scope? Sorry - I don't even exactly know what that means. The reason I think that, is because when I put the nav styling tweens directly into the Nav Animation timeline, then the animation works. If there is a more efficient way to achieve this please tell me. Thanks so much! Sonya. PS. I did manage to achieve the nav styling using scrollTrigger's toggleClass, but animating the style with css does not look as smooth.