Jump to content
Search Community

module animations es6 order

freuxdesbois test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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



 

Link to comment
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
Link to comment
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()

 

Link to comment
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.

Link to comment
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}

 

Link to comment
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
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...