Jump to content
GreenSock

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

module animations es6 order

Recommended Posts

I need to build a grid first, and then trigger an animation of it.
(and keeping control of the timeline)
But I want to keep the animation separate from the main app, so I'm using import module.

My problem is that it seems that the animation load BEFORE the grid is built and the animation never trigger when I use import { } from.... and give wrong total time value...

I think this is a async issue in ES6, is there a way to defer the creation of the Timeline instance ?

 

/* app.js */
import {Grid, Animations} from "./components"

// GRID CONSTRUCTION
Grid.build()

console.log(Animations)
// WRONG DURATION : TimelineMax {vars: {…}, _totalDuration: 1.5, _duration: 1.5, _delay: 0, _timeScale: 1, …}

// IF I paste the animation inside the app.js file AFTER Grid.build() :
// GOOD DURATION : TimelineMax {vars: {…}, _totalDuration: 2.5, _duration: 2.5, _delay: 0, _timeScale: 1, …}







/*****************************************/
/* Animations.js */
import { TweenMax, TimelineMax, Draggable } from 'gsap'



var intro = new TimelineMax()
	.addLabel('deploy',1)
	.staggerTo('.dropH',0.5,{
		attr:{x1:0,x2:window.innerWidth},
		stagger: {
			amount: 0.5,
			from: 'center',
		}
	},0.5,'deploy')
	.staggerTo('.dropV',0.5,{
		attr:{y1:0,y2:window.innerHeight},
		stagger: {
			amount:.5,
			from: "center",
		}
	},0.5,'deploy')
	.staggerFrom('.out',0.5,{
		attr:{y1:'50%',y2:'50%'},
		stagger: {
			amount:.5,
			from: "start",
			grid:[20,20]
		}

	},0.5,'deploy+=0.5')
	.staggerFrom('.out2',0.5,{
		attr:{x1:'50%',x2:'50%'},
		stagger: {
			amount:.5,
			from: "start",
			grid:[20,20]
		}

	},0.5,'deploy+=0.5')
	.from('.drop',.5,{opacity:0})


export default intro



 

Share this post


Link to post
Share on other sites

You could put the timeline creation inside a function and call the function later after the grid has been created.

  • Like 1

Share this post


Link to post
Share on other sites

You are exporting a default here.

export default intro

 

But not importing a default here.

import {Grid, Animations} from "./components"

 

Check out the docs on import and export.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

 

I would skip exporting a default.

export { intro };

 

  • Like 1

Share this post


Link to post
Share on other sites
25 minutes ago, ZachSaucier said:

You could put the timeline creation inside a function and call the function later after the grid has been created.

 

This too, I was looking at your import problem, which you didn't clearly illustrate. Export a function to create the animation. 

Share this post


Link to post
Share on other sites

Well, I did this, and it worked, thanks :
But I'm wondering if it's an elegant solution, I have to add 20 more animations like this and it seems overkill to add a function each time I need one.
 

// Animations.js
function getIntro() {
	let intro = new TimelineMax()
		.addLabel('deploy',1)
		.staggerTo('.dropH',0.5,{
			attr:{x1:0,x2:window.innerWidth},
			stagger: {
				amount: 0.5,
				from: 'center',
			}
		},0.5,'deploy')
		.staggerTo('.dropV',0.5,{
			attr:{y1:0,y2:window.innerHeight},
			stagger: {
				amount:.5,
				from: "center",
			}
		},0.5,'deploy')
		.staggerFrom('.out',0.5,{
			attr:{y1:'50%',y2:'50%'},
			stagger: {
				amount:.5,
				from: "start",
				grid:[20,20]
			}

		},0.5,'deploy+=0.5')
		.staggerFrom('.out2',0.5,{
			attr:{x1:'50%',x2:'50%'},
			stagger: {
				amount:.5,
				from: "start",
				grid:[20,20]
			}

		},0.5,'deploy+=0.5')
		.from('.drop',.5,{opacity:0})

	return intro
}



export {getIntro}


// app.js
import {getIntro} from "./components/Animations"

// GRID CONSTRUCTION
Grid.build()

// have access to the timeline
let intro = getIntro()

 

Share this post


Link to post
Share on other sites
4 minutes ago, freuxdesbois said:

I'm wondering if it's an elegant solution, I have to add 20 more animations like this and it seems overkill to add a function each time I need one.

You could create the timelines inside of the same module (or have a module that compiles all of them) and have one function that feeds you all of the timelines that you need. That way you don't have to import from 20 different files in your app.js.

Share this post


Link to post
Share on other sites
5 minutes ago, ZachSaucier said:

You could create the timelines inside of the same module (or have a module that compiles all of them) and have one function that feeds you all of the timelines that you need. That way you don't have to import from 20 different files in your app.js.


Thanks for the answer, but I wasn't assuming loading 20 files, but instead preparing 20 functions inside Animations like this :
 

function getIntro() {
	let intro = new TimelineMax()
	// .....
	return intro
}

function getAnim01() {
	let anim01 = new TimelineMax()
	// .....
	return anim01
}

function getAnim02() {
	let anim02 = new TimelineMax()
	// .....
	return anim02
}

export {getIntro,getAnim01,getAnim02,....}

// or
var all_anims = {intro:getIntro,a01:anim01,a02:anim02,....}

export {all_anims}

 

Share this post


Link to post
Share on other sites

You could have a function that provides all of those timelines. 

 

function getIntro() {
	let intro = new TimelineMax()
	// .....
	return intro
}

function getAnim01() {
	let anim01 = new TimelineMax()
	// .....
	return anim01
}

function getAnim02() {
	let anim02 = new TimelineMax()
	// .....
	return anim02
}

function getAnims() {
  return {
    intro: getIntro(),
    a01: anim01(), 
    a02: anim02()
    //...
  }
}

export {getAnims}

 

Or am I misunderstanding you?

  • Like 1

Share this post


Link to post
Share on other sites

No, no sorry, you perfectly understood :)
I do agree with your solution, it's just a personnal feeling I can't shake off seeing all this functions. Let's say it's solved, thanks for the time

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×