[module animations es6 order]

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

 

[module animations es6 order]

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}

 

[module animations es6 order]

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()

 

[module animations es6 order]

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

 

[Pause a timeline]

Awww thanks for the explanation, I feel less stupid
The difference is subtle but crucial


Ok, another question related to this, sorry.
So I added a reverse button, and if I push it let's say 3-4 seconds later than step1, the blue square flashes then disappear...
This is tricky because it doesn't seem to happen everytime...
Is there a way to avoid this flash thing?
 

See the Pen jeVbZM by freuxdesbois (@freuxdesbois) on CodePen

 

[Pause a timeline]

Awww thanks for the explanation, I feel less stupid
The difference is subtle but crucial

[Pause a timeline]

Hi there, 

Something I don't get with the timeline, it's the pause function... In the pen linked, I tried to paused the Timeline after step1, but it also plays step2.... How can I pause my timeline after each step then?
 

See the Pen oazLOK by freuxdesbois (@freuxdesbois) on CodePen

[Google Web Designer app -- Anyone use it?]

I also used GWD for a few banner campaigns but this tool is still young...

too much time lost doing simple tasks, compared to hand coding. and time is money

 

I still miss a good GUI (like flash) to manipulate the elements, but found an alternative for my workflow thanks to a chrome extension :
https://chrome.google.com/webstore/detail/positionable/hcakmjkjjgaehnnflnelfngbhnppgnpp?hl=fr

 

+ a custom-made js timeline bar like GWD to control the animation...

 

And yes, gulp is really a time-saver too, you should learn it, it's quite easy (or nodejs)
 

[Flash Professional HTML5 Canvas export with GSAP]

Wow, thanks for the links, it really opens up some new perspectives

But I'm not quite sure using it on banner animations, it seems too heavy ? (nearly 280ko minified)