[Having calls at the end of each timeline improves performance]

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.

[Having calls at the end of each timeline improves performance]

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

[Having calls at the end of each timeline improves performance]

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?

[export multiple timelines and play in a master timeline]

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!

[export multiple timelines and play in a master timeline]

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

[Timeline keeps going switching between translate3d and translate]

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?

[Performance having multiple timelines]

Hello @Cassie and @OSUblake.

 

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

[Jerky translate animations in Chrome]

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

[Timeline keeps going switching between translate3d and translate]

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.

 

 

[Performance having multiple timelines]

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.

[Fluid animation middle step]

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.

[Fluid animation middle step]

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.

See the Pen abpEXNZ by eduardfossas (@eduardfossas) on CodePen