Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sensenel

GSAP async / await

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

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.
×