philip_b

Not bad at all! Spotting that I had the timelines variable declared inside the loop = excellent; using just the id as the timeline name = genius. It makes referencing them so much easier. Also I would never have found 'currentTarget.id' in any of my searches. Thank you soooo much for your help @Dipscom, I feel as though I've had a successful day, and it's only 09:30. My final JS is below var tls = {}; //create variable for timelines $("div[id^='press']").each(function(index) { var Uid = $(this).attr('id'); //Unique id of the DIV var UtInner = "#" + Uid + " .here"; tls[Uid] = new TimelineMax({ repeat: -1 }); tls[Uid].to(UtInner, 1.5, { alpha: 0}, 0).to(UtInner, 1.5, { alpha: 1 }); //create the hover events $("#" + Uid).hover( onEnter, onLeave ); }); function onEnter(e){ tls[e.currentTarget.id].pause(); tls[e.currentTarget.id].seek(0); } function onLeave(e){ tls[e.currentTarget.id].play(); } http://codepen.io/butlerps/pen/YpraBj?editors=0010

just spotted this example that does exactly what I want re: looping through elements and targeting specific ones with hover. I'll have a play with it tomorrow. http://codepen.io/rhernando/pen/vjGxH

Hey @Dipscom, thanks for your feedback. Re point 2) I had a play around with the position parameter before posting (you may spot some unnecessary ',0' in my original post). I think the closest I got was var seoTween = new TimelineMax({repeat: -1}); seoTween.to("#seoTicker", 0.1, {alpha: 0, delay:1},0).to("#seoTicker", 0.1, {alpha: 1, delay:1}); seoTween.to("#seoTickerHover", 0.1, {alpha: 1, delay:1},0).to("#seoTickerHover", 0.1, {alpha: 0, delay:1}); Which was close, but no cigar. Regarding point 1) I've tried to have a go at creating TimelineMax dynamically and have it working. But with regard to then dynamically creating hover events that target the dynamically created tweens... that's way beyond my ability. So, for this application I will either live with all lights coming on when one is hovered or create each one manually. $("div[id^='press']").each(function(index) { var Uid = $(this).attr('id'); var Uname = Uid.split('_'); var Ut = Uname[Uname.length - 1] + "Tween"; var UtInner = "#" + Uid + " .here"; console.log(Ut); var vars = {}; vars[Ut] = new TimelineMax({ repeat: -1 }); vars[Ut].to(UtInner, 1.5, { alpha: 0 }, 0).to(UtInner, 1.5, { alpha: 1 }); }); a pen of the above can be seen here http://codepen.io/butlerps/pen/XNeXwy/

It may look simple (to you guys it's a no-brainer) but I've managed to get two animations working over the weekend (yeah, it took me that long). If you get a chance and need a laugh, can you take a look at what I've written and tell me how I could have done it better please. 1) blinking light. Scope: Flash button to indicate to a visitor that there is a button they can press. I have two imaged (button off, button on) I want button on to be animated so as it turns on quickly then fades out. When someone hovers over the button, the animation should stop and go back to the beginning (so as the on state is fully visible) then restart when hover out. The only down side about my current implimentation is that when you hover over one of the buttons, all the other buttons pause and restart. I'm guessing I'll have to have id's for each button (rather than using the class name) and create timelines for each. <p>flash / blink</p> <div class="press"> <div class="here"></div> </div> <p>in reality the above are transparent pngs</p> .press { background-color:blue; width:50px; height:50px; position:relative; } .here { background-color:red; width:100%; height:100% } var pressTween = new TimelineMax({repeat: -1}); pressTween.to(".press .here", 1.5, {alpha: 0}) .to(".press .here", .5, {alpha: 1}); $(".press .here" ).hover( pause, start ); function pause(){ pressTween.pause(); pressTween.seek(0); }; function start(){ pressTween.play(); }; 2) Alternate flashing lights: This is where I need some help, Basically I want two square waves running in parallel with each other, one off-on-off-on etc the other, on-off-on-off etc. I'm sure I could do in on one timeline but I just couldnt get it to work no matter what I tried. The only way was to have two time lines. <p>square wave</p> <div class="box red" id="seoTicker"></div> <div class="box blue" id="seoTickerHover"></div> <p>in reality the above are transparent pngs</p> .box { width:50px; height:50px; position:relative; margin-bottom:2px; } .red { background-color:red; } .blue { background-color:blue; opacity:0; } var seoTween = new TimelineMax({repeat: -1}); seoTween.to("#seoTicker", 0.1, {alpha: 0, delay:1},0).to("#seoTicker", 0.1, {alpha: 1, delay:1}); var seoTween2 = new TimelineMax({repeat: -1}); seoTween2.to("#seoTickerHover", 0.1, {alpha: 1, delay:1},0).to("#seoTickerHover", 0.1, {alpha: 0, delay:1}); The linked codepen shows them both working albeit with blocks with background colours compared to transparent PNGs in real life Cheers, in anticipation of any advice you can offer (as long as the advice isn't to give up the day job ).

I'm so impressed with your level of support, there are plenty of forums out there where either I'd have got no reply or a simple 'no' in answer to my question. You've given me the encouragement to get my teeth stuck into this and have a play around. Any developments I make, I'll post here. Cheers once again. P.x

Hey Jack, thanks for the incredibly fast response, much appreciated. I don't think I explained myself well in the original post as I'm sure my question pertains to GSAP, not scrollMagic. Currently I'm using wow.js and animate.css, wow is the trigger mechanism much the same as scrollMagic and animate.css takes care of the tween. to add an animation (based on scroll position) to a div all I add is a class "myDiv wow fadeInLeft". If I add a class "myDiv animated fadeInLeft" then the animation happens regardless of scroll position. for want of a better term, animate.css is a 'library' of animations using the webkit-keyframes 'from and to'. As you can see, from a programming point of view it is very easy to add an animation to "myDiv" just by giving the div a class. Putting the scroll position to one side for now, Using animate.css I can animate 'mydiv' as easily as this <div class="myDiv animated fadeInLeft">hello world</div> from what I've read, for me to add a similar animation using GSAP I'd have to create a tween for "myDiv" with the two properties for sliding the div and fading it. <div class="myDiv">hello world</div> TweenMax.to('#myDiv', 1, { x:-100% , autoAlpha: 0 }); So (and I think this is a rhetorical question) is there a 'library' of reusable GSAP tweens that can be added to a site and called multiple times simply by adding a class name to the divs I want to animate? I hope I've not confused the question even more! Cheers, Philip

Hi, this is probably a dumb question, sorry if that's the case! I'm currently using wow.js and animate.css to add some movement to a site I'm working on. It's really easy to implement, i.e. if I want a div to fade in from the left (when you have scrolled down the page so that the div becomes visible on screen) I add the following:- <div class="wow fadeInLeft">some content here</div> It's so simple to impliment. I'm wanting to use scrollmagic and GSAP to add parallax to my website and wondered how easy it would be to use them to also replace my wow animations. I guess my question is.... is there a way I can add a class name to a div and get GSAP to animate it based on what the class name is. Cheers, Philip

Hi Jonathan, thanks so much for spending the time on this, I like your inplementation however it still isnt the same as my original in that your animation once started goes through to completion i.e from 0 to 100% whereas with my script I can stop the animation wherever i want to just by stopping the scroll wheel. I didn't want to share the following link as it is a development site and will eventually be removed, but take a quick look to get a feel for what I want. Perhaps the final solution is a mix of my code the shrink/slide the logo based on scroll position and use GS to slide in the menu which like your examples is event driven and once started goes through to completion. http://openentrances.bricklanestudio.com

Hi Carl, thanks for your reply and example. I don't think i'm going to be able to reproduce the effect I want with GS as I don't want the image to scale down/slide from centre to left when the page hits a certain scroll position rather I want the scale/slide to be proportionate to the scroll position. In other words 10% scroll = 10% reduction of size/slide, 50% scroll = 50% reduction of size/slide and so on. I'll certainly be using GS for everything else so no doubt you'll be seeing me again with more questions. Before then I'll certainly be checking out the Getting Started video. Cheers, Philip

Hi guys, I'm new to all of this. Came across GS while investigating ScrollMagic to perform a parallax effect and it said it required GS. It got me to thinking about using GS for all my animations on the site. I've currently managed to write some JS (not my native language, i'm okay with php/html/css but muddle my way through JS) to center an image (based on size of parent div and size of image) then on scroll scale down the image whilst sliding it to the left. I'm pleased with the effect but wondered is this something I could do with GS since I'll be loading it to do the parallax effect anyway. I've just created my first codepen to demonstrate what I've written so far. I know I could probably figure this all out myself if I read the quick start and looked at a few examples but I'm trying to balance about 10 plates on sticks at the moment and a few are starting to wobble! I've also got wow.js loading on the site but have a feeling I won't need that once I have GS figured out. I'm not asking for someone to write the code (would be nice) but if you could let me know that it can be done with GS and a few pointers on how to do it would be great. Cheers,