DeeDubs

Thanks for this, the second approach looks very much like what I was trying to do... however, having tried it out it the .addCallback(loop.play) doesn't start the paused animation, is there something else I need to be considering? I put it into a codePen to show : http://codepen.io/anon/pen/ygKaWp

Hi There, I have been building banners for a while using GSAP for my animation (great tool BTW) and I have always structured the animations along the follow way: function frame1build(){ var tl = new TimelineMax(); tl.from('#item', 0.7, {animate properties}); return tl; } function frame2build(){var tl = new TimelineMax(); tl.from('#anotherItem', 0.7, {animate properties}); return tl; } function startAd(){ var tl = new TimelineMax({paused: true}); tl.add(frame1build()) .add(frame2build()); } and so on...startAd() is called on the ad loading. this has always worked great as i can separate my frame animations into separate functions, adjust the timings in the main startAd function timeline so they overlap etc what has always stumped me is how I can cross call or reference these. Or for example if i wanted to add a timeline that had a looped animation I can add it like below: function loopedAnimation(){ var tl = new TimelineMax({repeat: -1, repeatDelay: 1}); tl.to('#loopItem', 0.2, {left: '+=10', opacity: 0, ease: Power2.easeIn}, 0.2); return tl; } function frame1build(){ var tl = new TimelineMax(); tl.from('#anotherItem', 0.7, {animate properties}) .add(loopedAnimation); return tl; } and this works fine too... what I cant work out is how I can access the timeline within loopedAnimation to stop it or pause it etc from within a different function tl (ie in frame2build I want to stop the looping) I tried things like .remove(loopedAnimation) but it just stops the whole thing working, similarly cant work out how to access play or pause ? How do I got about accessing/controlling them? Thanks Dave

I finally worked it out, thanks for the pointers guys... as I was starting to suspect, it was just me being a f$%$ing idiot. FYI as I have .addIndicators in my ScrollMagic scene I needed to make sure I was also calling the ScrollMagic Debug JS file... as that was missing it was spannering everything else! Thanks again and sorry for wasting any time

Just tried that... and no joy, same error. I think I may just try calling them in via the page header rather than enqueuing them and see if that works

yeah I thought that but the script isn't fired until everything is loaded so the DOM element should be there.

Hi There, Im not sure if this is strictly a GSAP issue as I don't quite where the problem lies. I am trying to make use of a little GSAP/ScrollMagic on a Wordpress site but it keeps throwing an error. It is a custom theme I am making so shouldn't be other script conflicts as it is very minimal build so far. I am enqueue the scripts in my functions file like: function my_theme_scripts_function() { wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js',array(), false, true ); wp_enqueue_script( 'scrollmagic-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js', array(), false, true ); wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/scripts.js', array(), false, true); } add_action('wp_enqueue_scripts','my_theme_scripts_function'); then just for testing have tried using the below in my scripts file: var controller = new ScrollMagic.Controller(); var myTest = new ScrollMagic.Scene({duration: 200}) .triggerElement('#hero1') .setTween(testTween) .addIndicators() .addTo(controller); but I keep getting the same error: scripts.js?ver=4.5.3:33 Uncaught TypeError: (intermediate value).triggerElement(...).setTween... is not a function any ideas ?I have checked in console log and GSAP is loaded, I have tried adusting the code adding jquery or gsap-js dependencies, I have tried the links with and without https and http, and nothing seems to make any difference. Am I missing something obvious?(I realise I could just try linking to them in the head of the document but I would rather try and load them in the "correct" way if possible) Cheers D

thank you so much, you guys make it look so easy!

With this code, is it possible to make the last segment stay lit/highlighted? Ive tried working best way of doing this but can't get it to work (JS/code isn't my strongest suit) I assume I'd wrap the tween call (that fades back out) in conditional statement but not sure how to test that it is the final segment in the spinning cycle to set/pass a var. D

Interesting, I've tried in a few versions of safari, but they were all earlier than 8 so maybe it is bug in older versions that has been rectified.

Hi, I've come across a bug (So far only in Safari on Mac) and Im assuming it is with bug safari rather that GSAP but I'm wondering if there is a hack I can use to fix it. I've used the brilliant tilting script from ihatetomatoes and added some buttons within, but when you rollover the buttons you will notice that some have a very restricted hit area (hover state and click only works when you are rolling over in the middle of the top two buttons, not the full width. Anyone seen this before? D

Actually, I have a quick question: what did you mean by You were setting the transformOrigin redundantly. That's fine, just wasteful. Better to set it once and leave it. How would I set it just once, do you mean I just need to set it once in the first .to of the TimelineMax?

Thank you, thank you... you guys are geniuses! It also makes me realise I would never have been able to solve this on my own as I have never heard of modulus!! I will play with the code and see if I can get a better understanding of what's going on.

Wondering if someone can help shed some light on something I am trying to do with GSAP which I just suspect I am going the wrong way about solving. Essentially there is a dial that spins for a random amount of 360° rotations and it finally settles on one of 10 segments (each 36° in size). What I am hoping to achieve is the segments to animate as the dial goes past them each time (so in sync with the speed of dial). I have very crudely recreated in CodePen, the 3 issues i think I have are: • I can't get the value returned from updateProps to always be a 0-360° value - it gets higher and higher the more it spins? • if the dial spins really fast my current way of calling the function segmentGlow() sometimes misses out if the numbers are jumping up in big steps • i really want the segments to animate each time the dial passes, but I’m not sure if calling the timeline in the function again works I’m hoping I’m missing out on something and there is a much easier way of solving this…. any pointers/help greatly appreciated