[GSAP and Svelte]

 

1 minute ago, Dipscom said:

Here: this is what you'll be needing to do, bind a variable to the instance of the component.

 

https://svelte.dev/docs#bind_component

 

Thank you Dipscom!

[GSAP and Svelte]

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.

[GSAP and Svelte]

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.

[GSAP and Svelte]

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.

 

See the Pen zYNaVJB by sonya-ninja (@sonya-ninja) on CodePen

[GSAP and Svelte]

52 minutes ago, Dipscom said:

Hello!

 

You see in your CSS where you set visibilty to "hidden"? You're declaring the element's natural state to be hidden. Doing a ".from" tween will animate your element from the GSAP-declared values to the elements natural state. In order for you to achieve what you want, you need to not have the "visibility:hidden" set in your CSS or use the other tween methods that you have already noticed achieve your desired result.

 

Thanks for the response Dipscom!

 

I'm confused .... How do I understand this then? (https://greensock.com/docs/v2/Plugins/CSSPlugin)

 

Quote

And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

 

[GSAP and Svelte]

On 11/28/2020 at 11:15 AM, Dipscom said:

@Sae Woo it turns out that we can simplify your approach even more and there's no need to use the header script either.

 

I've updated my own examples:

 

onMount: https://svelte.dev/repl/94885eb0f90045da934ed5fd9f7fdb2a?version=3.29.0

Transition directive: https://svelte.dev/repl/1f70e16d637945fa8788fafafb481454?version=3.29.0

In/Out directives: https://svelte.dev/repl/000b2f192c204cd799dbb4f6d70a1c21?version=3.29.0

Action directive: https://svelte.dev/repl/eb2f99e9f3324e25af4eaada0389eed6?version=3.29.0

Animation directive: (TO-DO soon).

 

Thanks for bringing that to my attention. Learning everyday.

 

EDIT: Upon further testing, it appears you don't even need the import gsap from 'gsap'; line for GSAP to be included in the RELP. That truly is black magic to me. 😦

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

 

 

[SplitText and Stagger - Illusion of curving text around a sphere]

8 minutes ago, PointC said:

It sounds like you want more of a fluid movement as the letters go across the globe? Like when one letter is at full size, the letters on each side of it are still scaling back down. If that's the case, it seems a lot like my wavy slider demo. Maybe it'll give you some ideas.

 

 

 

 

I also a full tutorial on its creation here:

https://www.motiontricks.com/wavy-gauge-numbers/

 

Hopefully that helps. Happy tweening.

 

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

[SplitText and Stagger - Illusion of curving text around a sphere]

18 minutes ago, ZachSaucier said:

Hahaha, thanks for the shout out  You posted before I was awake. Sorry to disappoint by not answering first but mikel gave a great answer!

 

If you want text to actually wrap around a planet then it'd be good to use a technology like WebGL (GSAP can still help out with the animation). Depending on the complexity of the globe you need https://globekit.co/ might be a helpful resource.

 

Overall you post is pretty broad. If you have a specific question let us know  

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!

[SplitText and Stagger - Illusion of curving text around a sphere]

1 hour ago, mikel said:

Hey @Sonya.Ninja,

 

Staggering the scale of a split text horizontally is not that easy (spacing of the words). Here's just a try with two stagger tweens

 

 

 

 

@PointC has a super vertical solution: an overlap repeating loop

 

 

 

 

But ZACH definitely has something else in the quiver ...

 

Happy scrolling for a better world ...

Mikel

 

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!

 

[SplitText and Stagger - Illusion of curving text around a sphere]

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!

See the Pen RwaapPz?editors=0010 by sonya-ninja (@sonya-ninja) on CodePen

[ScrollTrigger: scrolling fast back breaks reverse. Scrolling slowly works perfectly.]

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

[ScrollTrigger: scrolling fast back breaks reverse. Scrolling slowly works perfectly.]

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.

 

 

[ScrollTrigger: scrolling fast back breaks reverse. Scrolling slowly works perfectly.]

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.

[Drag along an svg path]

28 minutes ago, ZachSaucier said:

Hey @Sonya.Ninja. I don't really understand your approach. I'd do something more like this:

 

 

That is perfect!

 

Thanks so much!

 

[Drag along an svg path]

33 minutes ago, ZachSaucier said:

Hey Sonya. Your approach seems fine to me. What is the issue?

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

[Drag along an svg path]

On 1/10/2018 at 8:43 AM, OSUblake said:

 

Actually, this might be easier. I just modified the closestPoint function from this d3 demo.

https://bl.ocks.org/mbostock/8027637

 

 

 

 

 

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!):

 

See the Pen YzwrXwb?editors=1011 by sonya-ninja (@sonya-ninja) on CodePen

[Active nav-item styling using both scrollTrigger and click]

6 hours ago, ZachSaucier said:

You'd need to disable the ScrollTriggers for the navigation items in between during the transition. It's doable but likely more work than it's worth. Why not keep the animations playing as they do now?

 

Not sure what you mean here. The nav styling is already updating when you scroll to each section?

 

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

[Active nav-item styling using both scrollTrigger and click]

On 6/18/2020 at 10:59 PM, ZachSaucier said:

Hey Sonya and welcome to the GreenSock forums.

 

You should use your developer tools console (F12) to check for errors. Opening it up for your pen I see "Uncaught TypeError: ALL_FUNCTIONS.sectionOne is not a function". I'm guessing those are additional animations that you took out for the sake of the demo (thanks for doing that).

 

FYI we recommend using the GSAP 3 way of formatting. For more about that check the GSAP 3 migration guide.

 

The main issue is that you're using an older version of ScrollTrigger that has a bug related to zero duration timelines with ScrollTriggers. Update the file to version 3.3.3 and it will animate some. 

 

But you'll still need to change your code a bit because you need a way to animate back to the previous section on reverse. I might do it by calling your method with the previous item - something like this: tl.call(ALL_FUNCTIONS.styleTheNav, [prevmenuitem]); - before you call the item that shows for that section. That way when you reverse it it'd call the previous one second. If you have overwrite: "auto" on those tweens, it should animate the way you want. I'd also recommend a toggleActions of toggleActions: "play none none reverse".

 

I noticed that you tried to use the position parameter on non-timeline tweens. That won't work because the tweens have nothing to position them in regards to.

 

Happy tweening.

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!

 

 

See the Pen zYrYgzy by sonya-ninja (@sonya-ninja) on CodePen

 

 

 

 

 

 

 

 

[Active nav-item styling using both scrollTrigger and click]

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.

[Active nav-item styling using both scrollTrigger and click]

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.

See the Pen zYrYgzy?editors=1010 by sonya-ninja (@sonya-ninja) on CodePen