en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en de de en en fr en en en en en en en en en en en en en en en nl nb en en nl en en en en en en en de en en en en en es it nb en es it en nl en en en en en en en en en nl nb en en nl en en en en en en nl en nb en nl en en en en en en en en nl nb en en nl en en en en en en nl en nb en nl en en fr en en en en fi fr nb en fi fr nl fr en en en en en en en nb en en en fr en en en en en en fr nb en en fr en es en en en en en en fr nb en en fr en es en en de en en en de en hu en fr en en en en en nl en en en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
Hi, Wondered if anyone can help? I have text and i would like it to scroll from bottom to top, going off the banner view and then leaving it on the last text for like 2.5 seconds. How would I do this??       Lorem Ipsum is simply dummy text?     Lorem Ipsum is?     Lorem Ipsum is simply dummy text of ?     Lorem Ipsum is simply dummy ?     Lorem Ipsum is simply dummy text of the printing?         var tl = new TimelineLite(); function anim() { copyScroll = document.querySelector('.copyScroll'); p = document.querySelector('p'); tl .to(copyScroll, 1.5, {y: '-400px'}); }
Background Exit click and CTA effect onclick and hover
lynette posted a topic in Banner Animation
Hiya, Is it possible to have the CTA button in a banner to have effects, when hovered and clicked and also to have the BG_Exit as well? here is the code.: function exitClickHandler(e) { console.log('exit'); Enabler.exit('BackgroundExit'); } function ctaClickHandler(e) { console.log('ctaexit'); Enabler.exit('CTA Exit'); } function ctaMouseDown(e) { console.log('mousedown'); }); }; When the 'BackgroundExit' is z-indexed, then the CTA doesn't work, but when z-index is off Exit CTA works, but then the 'BackgroundExit' doesn't click. Can anyone help on this issue?? Cheers, Lynette
Exit url and youtube progress bar
Hi, I have placed a Youtube video in my banner which shows after a few animations. It is working fine. The issue is I have given the exit id which is over the whole banner, a z-index of (for example) 40; Because of this z-index, I am unable to click on the progress bar of the youtube video to skip sections of the video. If I take the Z-index off the exit, it works, but then when I go back when I click on the banner again, on the video, it just plays the video, doesn't take me to my exit url. I need the z-index on the exit for that is the exit for the ad. Is there a way around this?
last frame not staying visible
lynette replied to lynette's topic in Banner Animation
Ok, I have uploaded to Codepen, but it is not looping correctly at all, only the last frame does. this is really strange. I hope that it is enough to see the code though. You can see in the console.log that the loop does loop. Here you go: Codepen link
copy animation not hiding at first
lynette replied to lynette's topic in GSAP
thank Carl, I have done that and it works! yay! thank you!
last frame not staying visible
lynette posted a topic in Banner Animation
Hi, I have animations working on a loop of 2 and then on last loop the last animation should stay on. But this is not happening Basically, the last .from shows the duration and then fades, but I haven't added a .to for it to fade, so then it should stay, no? Can anyone help? Code: function initAnim() { console.log("INIT ANIM"); if (loop  = 2) { console.log("END"); tl.pause(); tl.invalidate(); } else { // tl.to([line3, cta, line4], .4, { autoAlpha: 0, onComplete: initAnim }) initAnim(); } loop++; }
copy animation not hiding at first
lynette posted a topic in GSAP
Hi, I have been trying to figure out why all my text is showing for like 1 second and then disappears and the animations start? I am using: tl.set(truck, {rotation: 51, x: 67, y: 110}) .from(truck, 1, {x:-150, y:250}) .from(line1, 0.5, {opacity:0}) .from(line2, 2.15, {opacity:0}) I do realise if this may sound like a really simple question. I have even put each copy text in individual divs and given them opacity 0, but still that doesn't work. I have set and image to slide into the banner (truck), then the copy should appear. But that is not the case. We have all the copy showing overlapping each other, then the truck sliding, then copy hides and starts the animation. Any suggestions?? Thank you
lynette posted a topic in GSAP
Hi, Is there a way to add an pause onclick? Here is my code: var $container = $("#container"), $content = $("#content"), $bg = ("#bg"), $panel1 = ("#panel1"), $panel2 = ("#panel2"), $panel3 = ("#panel3"), $line1 = ("#line-1"), $line2 = ("#line-2"), $line3 = ("#line-3"), $line4 = ("#line-4"), $btn = ("#btn"), $exit = ("#exit"), tl; var tl = new TimelineMax({repeat:2}) tl.from($line1, 1, {opacity:0},"+=2.25") .to($line1, 0.5, {opacity:0}) .from($line2, 2, {opacity:0}) .to($line2, 0.85, {opacity:0}) .from($line3, 2, {opacity:0}, "go") .from($line4, 2, {opacity:0}, "go") .from($btn, 2, {opacity:0}, "go")
lynette posted a topic in GSAP
I would like to know how can I make an animation appear longer? I want it to EG: var tl = new TimelineMax({repeat:2}) tl.from($line1, 1, {opacity:0},"+=1.75") .to($line1, 1.5, {opacity:0},"+=0.25") .from($line2, 1.5, {opacity:0}, "+=1.15") .to($line2, 1, {opacity:0}) .from($line3, 4, {opacity:0}, "go-=0.35") .from($line4, 4, {opacity:0}, "go-=0.35") .from($btn, 4, {opacity:0}, "go-=0.35") i changed 4 to 0.5 but then how do I make it appear longer ? What happens as well, I have the gif image loop 3 and the copy text repeat 2. On the last repeat the copy seems to overlap the image. Can anyone help?
Auotplay a YouTube video after animations
lynette replied to lynette's topic in Banner Animation
Thank you all for you replies. @Jonathan, I have done both, but I am just not sure how to code it up. The first one I have done it like this: .to($artist, 0.5, {x:-700,opacity: 0, ease:Expo.easeOut, onComplete:onYouTubeIframe}, "+=2.0"); function onYouTubeIframe() { var player = new YT.Player('player', { height: '461', width: '820', videoId: bdCV1rNvjCE, playerVars: { 'controls': 0, 'showinfo': 0, 'fs': 0, 'enablejsapi': 1, 'start': 10, 'rel': 0, 'modestbranding': 1, 'iv_load_policy': 3 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } onYouTubeIframe(); But it doesn't work, I don't know what I am doing and what I am doing wrong as a matter of fact! The second option, adding the autoplay at the end of the URL, makes the video autoplay onload, not after the animations. @Joe, do you mean having the autoplay=1 at the end of the URL? Does this makes any sense??
Auotplay a YouTube video after animations
lynette posted a topic in Banner Animation
Hi, I have just started working the Tweens here, so please if you can help me on probably a simple thing for some. I would like to: 1. Add a YouTube video that autoplays after an animation (not when the banner starts, so the video starts autoplays after the animation). 2. When clicking anywhere on the banner to be taken to the external link, the video stops. 3. The video stops after playing for example, 10 seconds. Can this be done? I have been trying and looking into it and unable to combine my animation and Youtube video together.
“@greensock is just pure awesomeness. What more can be said?”
“I've never worked with a product that has such fantastic and enthusiastic support. GreenSock is incredible in its own right, but the team behind it is really what makes it shine.”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
“GreenSock is the best thing that happened to SVG animations since SVG animations.”
“Without GSAP I would have ditched front-end dev the day Flash officially died.”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“This is why I have absolutely no issues with paying for a subscription to GSAP, great product and awesome forum!”
“Aside from GreenSock’s laser-focused attention to detail, GSAP is fast, reliable, flexible, exceptional value (read: free in most cases) and, very importantly, supported.”
“...obviously GSAP is incredible.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.