eduardfossas

Pure love! Thanks, that is what I did. All of the are not paused and the only one paused it is the master line and I play it after adding all the other timelines. Thank you all.

Hello @OSUblake. Caring as always! I just want to play one timeline after the other so the Master timeline is doing that. How I can add timelines to an existing timeline? THanks in advance

Hello, I have two versions, one that we can call a prototype and the other one we could call it a production version. The prototype looks like: SPINNER_TIMELINE.to(..., {...}) function animateHero() { INTRO_TIMELINE.to(..., {...}) } SPINNER_TIMELINE.call(() => animateHero()) And then the production version looks like this: SPINNER_TIMELINE.to(..., {...}) INTRO_TIMELINE.to(..., {...}) MASTER_TIMELINE.to(SPINNER_TIMELINE, {}).to(HERO_TIMELINE, {}).play() Funnily enough, the second version, which for me has more sense, it makes animations look with a low frame rate. Do you know the reason why?

Hello, again @OSUblake. The issue was initialising my modules asynchronously. Btw, regarding your last comment, can you help me to know what it is the best way of adding timelines to a master timeline with the new gsap 3 syntax? Thanks in advance!

Hello, sorry if I am bothering too much this forum but I am eager to learn. I have the following code: import { gsap } from 'gsap' export const SPINNER_TIMELINE = gsap.timeline({ paused: true }) export const LOADER_TIMELINE = gsap.timeline({ paused: true }) export const HERO_TIMELINE = gsap.timeline({ paused: true }) export const HEADER_TIMELINE = gsap.timeline({ paused: true }) export const MASTER_TIMELINE = gsap.timeline({ paused: true }) then I am doing this in a Spinner class: import { SPINNER_TIMELINE } from '@options/timelines' class Spinner { constructor(element) { this.setLoader() } setLoader(spinner, spinnerBot) { SPINNER_TIMELINE.to( spinner.left.start, { x: 10 duration: '1', ease: 'none', }, ) } } and then I am having another class that creates and instance of this spinner class import { SPINNER_TIMELINE, MASTER_TIMELINE, } from '@options/timelines' class Intro { constructor() { new Spinner() this.animateMasterTimeline() } animateMasterTimeline() { MASTER_TIMELINE.add(SPINNER_TIMELINE, { time: SPINNER_TIMELINE.duration(), duration: SPINNER_TIMELINE.duration(), ease: 'power3.inOut', }) } } Spinner and Intro class are starting properly but the animation it's not. What I am doing wrong? Warm regards and thanks in advance

Awesome as always @OSUblake but so even if I define translate3d in the css and by default gsap uses translated3d it will be switching? I tried and it is happening. Because I am only animating the y property I think I will not force the 3d. What do you think?

Hello @Cassie and @OSUblake. Thanks for your replies and confirming my wonderings. I am doing it the proper way then.

I am, I added the will-change attribute in the css and solved the problem. Edit: But still, I did both, and the css looks better

Hello. I do not know if it is a common problem but I do not how to solve it. When the timeline has finished the elements are still animating swapping translate with translate3d. Screen Recording 2021-04-13 at 17.43.20.mov

Hello, it is just a wondering question that always comes to my mind using Greensock. Is there any maximum number of timelines that you can have? Does it impacts performance or it is a way of organizing code? It is good, bad or better to have a single timeline. Thank you in advance and warm regards.

Hello @mikel Thank you very much, this is exactly what I was looking for. I want to thank you all your patience, knowledge and help that you offer in this forum to the whole community. And thanks for shouting out that I am still using 2 syntax, I will refractor asap, it is much cleaner. Warm regards.

Hello animators! Hope you are having a nice day. I have a problem animating paths and the middle step, it takes too long, so I want it to be more fluid between start and finish, so when the paths meet in the centre does not take that long. I want to use easings so I cannot use Linear.None. Can you help me out? Thanks and warm regards to the community.