Jump to content
Search Community

GSAP async / await

sensenel test
Moderator Tag

Recommended Posts

Hello, 
a few years ago I worked a lot with GSAP, so 2017/2018. 

I'm currently building a smaller project where I want to load content via ajax, there are elements in it that I want to pick up and put in a timeline for a transition and I'm getting desperate ^^. 
I had done something similar a few years ago, but barba.js was involved - its own challenge - but this is overkill and there are promises and async await - so I thought. 

On the net and here in the forum is not very much to find on this and the little I have tried everything without success.

Sorry I don't have a CodePen example yet, but and am now at the point that I have to ask: Does this work at all? 

Thanks a lot 

 

Link to comment
Share on other sites

Hi sensenel!

 

I'm not sure what you're asking, but you just need to wait for whatever you're loading, insert it into the DOM, and then animate it. There a bunch of ways to load and insert content, and is beyond the scope of this forum.

 

Some pseudo code.

 

async function loadContent() {

  const content = await loadMyContent();
  // insert content into the DOM
  
  // now animate
  gsap.tp(".my-new-content", {
    x: 100
  });
}

 

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

 

 

 

  • Like 3
Link to comment
Share on other sites

Hi Blake, 
thank you for your quick response! 

I knew my request was very general - im sorry for that 


Thanks for your example! 
I handle my request the same way to load new HTML content on click.  
In my case, with the new content there are new elements added and I want to use this in a timeline. 

In said timeline are DOM elements which are already present (index) but new ones should be added, e.g. like this: 
 

// Elements from async loaded content: 
elementsNewContent = [$('.no1'), $('.no2'), $('.no3')];


timeline.fromTo(elVar1, 1, {top: elVar2}, {top: 0, 'width': '100%', 'height': '420px', ease: Power3.easeOut}, "marker")
.fromTo(anotherVar, 1.7, {y: 600}, {y: 150, ease: Power4.easeOut}, "marker")
.fromTo(anotherVar, 0.7, {alpha: 0}, {alpha: 1, ease: Power4.easeIn}, "marker=0.3")
.staggerFromTo(elementsNewContent, 1, {y: 150}, {y: 0}, 0.1);


i have a array with links, on these links i registered an eventlistener, if one of those i clicked i want to assemble a timeline combined out of already existing elements from my index and some new one coming from my async loaded content, like this: 
 

 

                headerArr.forEach((el, i) => {
                    el.addEventListener('click', (elVar2) => {
                        function myTl() {
                          let elementsNewContent = [$('.no1'), $('.no2'), $('.no3')];
                            return ... timeline ... // defined as mentioned above
                        }

                        myTl().then(() => {
				timeline.restart()
                        })
                    });
                });


tried already so many variations, im just lost right now ... i guess i may misunderstand some of this logic in general, right? 

Thank you very much for your help, i really appreciate!



 

Link to comment
Share on other sites

I'm still a little unsure about the exact behavior you want, but if you have an existing timeline and want to merge in new stuff, it would be better just to recreate everything again with all the new elements.

 

let timeline = gsap.timeline()

headerArr.forEach((el, i) => {
    el.addEventListener('click', (elVar2) => {
        function myTl() {
                    
          let elementsNewContent = [$('.no1'), $('.no2'), $('.no3')];
          
          timeline.progress(0).clear();
          
            timeline.fromTo(elVar1, 1, {top: elVar2}, {top: 0, 'width': '100%', 'height': '420px', ease: Power3.easeOut}, "marker")
.fromTo(anotherVar, 1.7, {y: 600}, {y: 150, ease: Power4.easeOut}, "marker")
.fromTo(anotherVar, 0.7, {alpha: 0}, {alpha: 1, ease: Power4.easeIn}, "marker=0.3")
.staggerFromTo(elementsNewContent, 1, {y: 150}, {y: 0}, 0.1);
          
            return ... timeline ... // defined as mentioned above
        }

        myTl().then(() => {
// timeline.restart()
        })
    });
});

 

Link to comment
Share on other sites

Thank you for your time! 
I was just hoping it would be possible to provide asynchronous DOM elements (not in the sense of fetching whole files or images) via Promises to a timeline without having to install a complete AJAX framework this time. 

Thanks again! :)

Link to comment
Share on other sites

  • 1 year later...

I have a similar issue, except the animation inside async is followed by other animations without async, and it throws off my scrollTriggers. Here's a simplified example - 

See the Pen poVEjBN?editors=0010 by kf420 (@kf420) on CodePen

 - once the second section (with async) is unpinned, third section jumps up and overlaps it. 

 

In production, the code for each section comes from a separate JS file (WordPress block) and I won't be able to consolidate them all inside the async function. Is there another way to update all following scrollTriggers?

Link to comment
Share on other sites

Hi,

 

There are three options I can think of.

 

One, is to use modules and check when the async section of your code is completed:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

 

Two, is to add either an object or a boolean to the global scope (window object) in order to check in the final section, using a recursive checker to verify when the second section async is completed (resolved/rejected), in order to execute the code once that is completed.

 

Three, use the id configuration value in the ScrollTrigger instance and in the final section create a recursive checker for that particular ID. Be careful to create such ScrollTrigger instance regardless if the async code is resolved or rejected, otherwise your entire code will be stuck on an endless loop:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.getById()

 

Happy Tweening!!!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...