GSAP Run all other animations without waiting for the first one

[DanielLav]

Hello my friends from GSAP. I continue to study your wonderful tool and faced a new task, which I have been struggling with for the second day.

 

I have an animation of the appearance of links to different categories (headerItem) and the links appear when each page of the categories is loaded.

 

There is also an animation for each of the 3 categories (with each category having its own animation). For example, I took the animation of one of the pages (standardAnim function). Each animation for a category is moved to a separate function.

 

Animation for links (where the headerItem is) on the categories is shown separately because it is on each of these pages.

 

I want all the animations that are in the standardAnim function to run immediately on page load without waiting for the headerItem to load.

 

I tried setting position to 1 but that didn't help. All animations that go further in the timeline continue to wait for the headerItem to load

How can I solve my problem? I will be grateful for any help. I really want to teach how to create something cool like guys who have 100 questions and answers 😅

 

 

See the Pen YzOxLWN by ProjectDCL (@ProjectDCL) on CodePen

[DanielLav]

Also in addition to my question.

 

How can I start an animation (like hover) that will ignore the current timeline?

 

So that if the user hovers over some button during the loading of the main animation on the site, he will have a background (which does not depend on the loading animation).

[elegantseagulls]

2 hours ago, DanielLav said:

I want all the animations that are in the standardAnim function to run immediately on page load without waiting for the headerItem to load.

Not sure what your dev structure looks like, but you could put the headerItem tl after the standardAnim() function call. That way if that function is there, it'll put that into the timeline before it looks at the headerItem addition to the timeline. If you can't do that, you could do something like:

 

  const tl = gsap.timeline();
  const headerTL = gsap.timeline()
  const standardTL = gsap.timeline()
  const headerItem = $(".category-header__item")

  headerTL.to(headerItem, {
    ease: 'back',
    autoAlpha: 1,
    duration: 10,
  })
  
  function standardAnim() {
    standardTL.to('.category-bg__standard', {
    autoAlpha: 1,
    scale: 1,
    duration: .6
    }, '<')
    .from('.category-standard__item', {
    ease: 'slow',
    autoAlpha: 0,
    scale: 0,
    duration: 1.8
    })
    .from('.category-title', {
    ease: 'slow',
    autoAlpha: 0,
    y: 70,
    duration: 3.4
    })
  }

  if($('.category-standard')[0]) {
     console.log('Standard')
     standardAnim()
  }

 tl.add(standardTL).add(headerTL)