lynette
lynette's Achievements
0
Reputation
-
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?? <div class="banner"> <div id="copyScroll"> <p> Lorem Ipsum is simply dummy text? </p> <p> Lorem Ipsum is? </p> <p> Lorem Ipsum is simply dummy text of ? </p> <p> Lorem Ipsum is simply dummy ? </p> <p> Lorem Ipsum is simply dummy text of the printing? </p> </div> </div> <script> var tl = new TimelineLite(); function anim() { copyScroll = document.querySelector('.copyScroll'); p = document.querySelector('p'); tl .to(copyScroll, 1.5, {y: '-400px'}); } </script>
-
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
-
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?
-
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
-
thank Carl, I have done that and it works! yay! thank you!
-
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) { tl.pause(0, true); } tl.play(); tl.set(truck, {rotation: 51, x: 118, y: 83}) .from(truck, 2, {x:-150, y:250}) .from(line1, 1.5, {autoAlpha:0}, "-=0.5") .to(line1, 0.5, {autoAlpha:0}) .from(line2, 2.15, {autoAlpha:0}) .to(line2, 0.85, {autoAlpha:0},"leave") .to(truck, 0.75, {autoAlpha: 0},"leave") .from([line3, line4, cta], 4, {autoAlpha:0, ease:Power4.easeOut}, "last") .call(loopCheck, ["param1"], this) } function loopCheck() { if (loop >= 2) { console.log("END"); tl.pause(); tl.invalidate(); } else { // tl.to([line3, cta, line4], .4, { autoAlpha: 0, onComplete: initAnim }) initAnim(); } loop++; }
-
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
-
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")
-
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?
-
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??
-
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.