Jump to content


  • Posts

  • Joined

  • Last visited


3 Newbie
  1. Thanks so much Craig. They really helped, i've got it working in a loop now. You guys are great. Greensock community going strong!!
  2. thanks for your help Mikel!! But i think its more to do with my loop when to trigger it with scrollmagic, not gsap.
  3. Thanks Mikel! Silly me. That solves it. Just one more thing. Im not sure what to do with the trigger. They all trigger at the same time.
  4. So i've tried using my animation component more than once on a page. But its only works on one element. It doesn't animate on duplicate elements I've tried methods from Petr https://www.youtube.com/watch?v=NA9SIQnzRQc & https://www.youtube.com/watch?v=c85GjM7vy5A&t=198s One of Petr's methods works great for adding a classes to multiple elements, but i cant get it working with a gsap timeline. This is my code, i left out all the gsap code animating my feathers. Now remember this animation is working perfectly on one div. Its just when i try duplicate the timeline on other divs, it only plays on one div not all of them. // create tween var timeline = new TimelineMax( {repeatDelay:0, repeat:-1} ) .add(tween1, 0) .add(tween2, 2.1) .add(tween3, 4) .add(tween4, 6.5) timeline.timeScale(1.2) // 1 default $('.feather_container_home, .feather_container').each(function(){ // build scene var scenefeather1 = new ScrollMagic.Scene({ triggerElement: this.children[0], triggerHook: '1', offset: 200, reverse: false}) .setTween(timeline) // .addIndicators( {name: "feathers"} ) .addTo(controller) }); Would be great if someone has a solution or had trouble with this before. thanks!
  5. Is this still the case in 2016 Carl? What do you recommend? My SVG's blur when its scaling, but once its completed its clear. So it only blurs when animating. Cheers
  6. thanks carl, that works but it still plays my last animation line then pauses. .add('stop') // want it to stop here before it plays the line below .to(txt_03, 0.6, {opacity: 0, ease: Power1.easeOut}, 'f4') So basically i want it to stop before txt_03 fades out. Its because the timeline hasn't complete its 'loop' yet. So this below hasn't fired yet if (loopNumber >= 2) { tl.pause('stop'); console.log('Paused'); Does that make sense? What would be the best solution? Thanks!
  7. can this be done with just tweenlite and timelinelite? This is my code below. It loops, but stop at the end. I've been trying to make it stop a few seconds before the end of the timeline but have failed to so. function start() { var bg = document.getElementById('bg'), txt_01 = document.getElementById('txt_01'), txt_02 = document.getElementById('txt_02'), txt_03 = document.getElementById('txt_03'), lockup = document.getElementById('lockup'), banner = document.getElementById('banner'), tl = new TimelineLite(); tl.eventCallback("onComplete", loopAnimation); tl .add('f1', 0) .add('f2', 4) .add('f3', 8) .add('f4', 12) tl .from([txt_01], 1, {x:'-=728px', ease: Power1.easeOut, onStart:function(){banner.style.visibility = 'visible';}}) .from(txt_02, 1, {x:'-=728px', ease: Power1.easeOut}, 'f2-=0.5') .to(txt_01, 0.6, {opacity: 0, ease: Power1.easeOut}, 'f2-=0.6') .to(txt_02, 0.6, {opacity: 0, ease: Power1.easeOut}, 'f3-=0.6') .staggerFrom([txt_03], 0.6, {opacity: 0, ease: Power1.easeOut}, 0, 'f3+=0.5') .to(txt_03, 0.6, {opacity: 0, ease: Power1.easeOut}, 'f4') // stops looping animation .add('stop', '-=2') // start looping animation var loopNumber = 0; function loopAnimation() { loopNumber = loopNumber + 1; if (loopNumber >= 2) { tl.addPause('stop'); console.log('Paused'); } else { tl.restart(); console.log('Times looped = ' + loopNumber); } } }