martis

Thanks Jack! In the first example, how could I apply some math like

x:"100vw" - 100

 ?

see codepen 

See the Pen KKRBGEN by martis (@martis) on CodePen

do you have a debounce example as you mentioned? Also, is there a way to define a value as a function every time the playhead hits that tween? Or is that function only called once upon creation.

Heya,

Have there been any advancements in terms of updating values on resize without calling an onResize function and recreating the timeline? 

That was it. How annoying!

Using next (react 18) and for some reason .from() is not working on refs and #ids... .to() is working just fine. Any suggestions?

It transforms the value to the .from() but does not animate back to the original value.

Thanks Jack,

I ended up having to abandon it and did something else.

Have you guys considered adding some sort of reverse:false option to automatically do this? 

Hello,

I am looking to have an animation only scrub in one direction. I am running into an issue with loading and having its start and end points jump around. Or it will appear higher on the page, then as images above it load, it pushes it down, but will not reset correctly using the example here:

Is there a method I should be looking at like `refresh()`?

See the Pen abZjjNr by GreenSock (@GreenSock) on CodePen

Ok removing my old types seemed to of worked. Lemme see if I can get things typed correctly

This is working...

const tl = React.useRef<GSAPStatic.Timeline>();
tl.current = gsap.timeline({ paused: true });

How does importing easing look like in 3.0?

Nm... I see you can just now use them as string

ease: "expo.inOut"

This is great, thanks all!

Hi all,

I installed 3.0.1 and am having some issues importing while using Typescript.

import { gsap } from "gsap";

[ts] Module '"gsap"' has no exported member 'gsap'.
import gsap

I was previously using @types/gsap. Do I need to update these definitions somewhere?

Thanks!

the xPercent, yPercent is working well and it seems to be updating correctly on resize. Can you give me any insights into when and how often those values are being calculated? Thanks!

Hi Jack,

It is to provide new values based on screen size for x, y movement. Which is now making me reconsider to use xPercent, yPercent. I'll experiment with this and see where it gets me!

Hi all,

Working with a gsap timeline in react as a `useRef` and wanted to know the best way to go about handling resize.

Right now I am remaking the timeline on resize, but I am having to record its current progress and set it back to that progress if the animation is currently running.

Is there a better method than totally remaking the timeline to "update it on the fly" based on new screen dimensions without using xPercent, yPercent?

This was the case and I found the fix, sorry for the alarm

Hi guys,

Been working on transitioning some things over to Vue (nuxt) and am getting this error with SplitText... seems to be something with _slice and _split functions?

Pretty sure what I am trying to split is not undefined

client.js:531 [nuxt] Error while initializing app TypeError: Cannot read property 'length' of undefined
    at _slice (SplitText.js:142)
    at _split (SplitText.js:497)
    at webpackJsonp../assets/js/libs/greensock/SplitText.js.pkg.SplitText._globals.SplitText.webpackJsonp../assets/js/libs/greensock/SplitText.js.p.split (SplitText.js:545)
    at new webpackJsonp../assets/js/libs/greensock/SplitText.js.pkg.SplitText._globals.SplitText (SplitText.js:121)

Thanks guys!

I ended up creating a Vue plugin...

Thanks Dipscom,

Do you have an example of what this might look like with the fallback? CDN feels like the easiest solution so far!

Hi all,

Know there are many posts about this, but things change overnight.

I am using Nuxt.js for Vue and have been playing around with a variety of ways to implement GSAP.

from Import, to vendor bundle, to plugin...

Wanted to know what everyone thinks is the best route to go these days knowing I like to include a lot of the extras!

Thanks!

All good, thank you for helping me explore this. After doing more research I realize I am just going to create the timeline in the master parent vue... and not worry about sending individual timelines up the chain. 

Rock on man! I agree the emit approach is the way to go. Would love to see an example where timeless can be emitted to the parent... the challenge would be how can I add them to the master timeline in a specific order? 

Thanks for the help!

Hi all,

Need advice on a general approach. Just started using Vue (nuxt). I’m building a site with say three components. Scene1, scene2 and scene3 inside a Site component. I want to keep the animation for each scene contained within the component Vue file. I then want to create a master timeline in Site that I can control as a user scrolls. 

I know how to create timelines and add timelines to other timelines, need advice on how I do it within Vue.

Curious if any Vue experts have advice on how to create the timelines in each component then merge them in a parent Site component. Or if this approach is bad

thanks!

I don't but I figured it out...

Rather than using a <clipPath> I had to use a <mask>

I want to use a stroked path as a clipPath for an SVG image so that I can animate the stroke on revealing the image underneath....

Everything I try seems to still use the fill area, even though fill is none..

Anyone know if this is possible?

Thanks!

Is there anyway you could add in .visible to this?

Wow, thanks Jack! So far so good, will let you know if I run into any hiccups!