Jump to content
Search Community

freuxdesbois

Members
  • Posts

    9
  • Joined

  • Last visited

Profile Information

  • Location
    France

freuxdesbois's Achievements

1

Reputation

  1. 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
  2. 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}
  3. 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()
  4. 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
  5. 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?
  6. Awww thanks for the explanation, I feel less stupid The difference is subtle but crucial
  7. 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?
  8. 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)
  9. 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)
×
×
  • Create New...