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