Search the Community
Showing results for tags 'Play'.
-
ok so i was trying to get this menu effect here: https://www.niccolomiranda.com/ and so i followed a tutorial on youtube at first it didnt work but after a while i got it to work but now the animation is not reversing, here's the code edit: here's the stackblitz link: https://stackblitz.com/edit/vitejs-vite-jnja3f?file=src%2FApp.jsx Navbar.jsx
- 8 replies
-
- gsap
- timeline()
-
(and 2 more)
Tagged with:
-
I can't use play in timeline, but if not using timeline like gsap.to directly without paused, it can work but I want to pause first then play when I click button, please help me guys?
-
Hi there! I'm newbie with GSAP but really enjoy using it!!! I'm currently trying to build a hover for my site company that play a video on background when hovered. As you can see on the code pen exemple, it works great. My problem is: I would like to pause the video after the the timeline reverse completely. I can find how to delay the pause fonction or using onReverseComplete in the timeline properties but nothing work... Another solution would be to just pause the video and not going back to 0 but the fix img (.img) doesn't come back. But I can't find how to exclude the img animation when the timeline is reversed. Thanks for your help
- 2 replies
-
- 1
-
- gsap
- javascript
-
(and 3 more)
Tagged with:
-
Hi, I'm having a issue with TimelineMax. I've created a timeline that opens and closes the drawer in my navigation. It works, but eventually if the first time I move the mouse above the navigation elements (that triggers the animation), one of the timelines doesn't work anymore. I'm executing the timeline on mouseenter triggered by the main navigation items. Then I'm playing the timeline reversed when it's triggered a mouseleave by the container of the entire navigation. You can see the working example in the following video (password: codepen). The problem happens when I move quickly the mouse over the navigation items. I managed to film it in this video (password: codepen) And here the video that shows the error (password: codepen)
- 3 replies
-
- mouseleave
- timelinemax
-
(and 3 more)
Tagged with:
-
Hello good people. I have a strange questions. I created animation play / reverse, but to start it I need to click twice and after that it works as it's should be... Any suggestion for this weird behaviour? Thanks! ❤️
-
I'm experimenting with tweenmax. What I would like to do is: 1. When the mouse passes on a text, you start to see the box where the video is. 2. When the mouse leaves the text, the video resets and hides itself. 3. The procedure is repeated.
-
Hi I have a mouseenter / mouseleave effect on a button. I'm using this method to prevent a CSS / JS conflict on the button which is also part of a pageload animation. I can get the timeline to play on mouseenter, but I can't seem to get it to reverse on mouseleave? Codepen link with HTML and CSS is included, and below is the JS/GSAP code for quick reference // GSAP / JS // --- button fade in function, invoked in subsequent timeline function buttonFadeIn() { var tl = new TimelineMax(); tl .to(".btn", 1, {opacity: 1, ease:Power3.easeIn}) .to(".btn a", 1.8, {opacity: 1}) return tl } // --- invokes initial fade in on pageload function homeTitles() { var tl = new TimelineMax(); tl .add(buttonFadeIn()); } homeTitles(); // --- mouseenter / mouseleave on 'Learn More' button var learnMore = document.getElementsByClassName("btn")[0]; // --- function that is invoked on mouseenter/ mouseleave function learnMoreHover () { var tl = new TimelineMax(); tl .to(learnMore, .3, {opacity: .3}) return tl; } if (learnMore) { learnMore.addEventListener("mouseenter", function(){ learnMoreHover().play() }, false); } if (learnMore) { learnMore.addEventListener("mouseleave", function(){ learnMoreHover().reverse() }, false); }
-
Hi guys, This is more of a pre-sale question than a problem, to be honest. But I do need some help with the Javascript/jQuery. I'm working on an SVG animation using Anime.js, but I feel that there are limitations to the animation that's possible for SVG. I was trying to replicate https://thieb.co homepage animation. So basically on mouse down, the animation starts playing, and mouse up, the animation reverses to the empty state. Due to Anime.js's limitations, I was wondering if DrawSVG is able to replicate the aforementioned effect? With a 'completed' callback to prevent the animation from reversing once completed, etc. Here's what I got so far: http://alfianridwan-fms-stories.netlify.com/ with Anime.js Is it possible to replicate this with DrawSVG? (before I purchase the membership and find out that I can't replicate it!) Thanks, Alfian
-
Hello everyone at GSAP forum. I appreciate any help with my problem I've been solving some time. There are few things I can't understand. This is my problem: Because I need to use some Tweens or Timelines repeatedly I decided to create functions with these Tweens/Timelines. These functions are appended to Timeline by .call() or .add() (both doesn't works) like this: var myTimeline = new TimelineMax() .add(down) .call(up) .add(TweenMax.to("box3", 1, {autoAlpha:0.2, scale:0.8, ease: Back.easeOut} )) ---------- function down() { var downTween = new TimelineMax() .add(TweenMax.to("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} )) .add(TweenMax.to("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} )) } ----------- No function in myTimeline waits for previous to complete - everything plays together - I'm not used to this behavior. I don't wanna use labels or something like that - I need them to chain (first one ends - second starts) as usualy when I add only tweens into timeline. Well, I tried to resolve my problem by some tricks but meet even more problems 1) I tried to use .pause() and then .resume() or .play() in my functions function down() { myTimeline.pause(); var downTween = new TimelineMax() .add(TweenMax.to("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} )) .add(TweenMax.to("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} )) } myTimeline.resume(); 2) I tried to use onComplete function down() { myTimeline.pause(); var downTween = new TimelineMax(onComplete:myTimeline.resume()) .add(TweenMax.to("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} )) .add(TweenMax.to("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} )) } I don't know why nothing works. What do I do wrong? Can anybody give my some explanation, please? Thanks a lot in advance. Peter
-
This is not in the documentation. Either it's a bug or the docs need to be updated to be clearer. When using `timeline.reversed(true)` if the timeline state is paused/finished it will resume it and reverse it. While reading the docs I expected that code to behave as `timeline.reverse().pause()` rather than `timeline.reverse(0)` See the demo Codepen to see what I'm talking about. Click on Reverse once the animation finished.
-
Hello people! I am struggling with this, what i want to do in my website is to click a link, take you to another page and also execute an animation. Basically im working a page with kind of tabs done with GreenSock, so for example, in my index i have two buttons to visit, Apple and Pear. If i click Pear, it will take me to a page that displays me Pear tab instead of Apple. That's it. Forgive my english! Its not my native language. Anyways this is the website im working on http://gamacreativos.com/combarranquilla_wp/recreacion-y-deportes/ (spanish website) for example, i want to click in Hospedaje button, and then load the page in the Hospedaje tab instead of Unidades de Servicio. Thanks!
-
this.tl .to(alpha, 1, {x: 100, ease: Circ.easeInOut}) .to(beta, 1, {x: -100, ease: Circ.easeInOut}, 0) Hi, I'm wondering if its possible to exclude the second animation only when reversing the timeline. tl.play() should play both of them. but when tl.reverse() it should only play the animation on the "alpha" element.
-
Hi, I want to play a Portion of my timeline - by seconds, progress or frames (whatever). For example: 1) Timeline is 10 secs 2) I want to play from 5 sec to 7 sec. 3) Add pause I think will not serve very well, as those portions change dynamically :/ Can't figure out from documentation, how to do this.
-
As you can see, I am trying to see if Timeline's progress is 0, then I play it and it expands the menu (empty) underneath, if it's 1, then it reverses it and folds the menu. Individually, everything works as intended. However, in order to avoid overlap of menus, I want to close the "other" menu before opening the target one, so I do Timeline.progress(0) to simply reset it to it's folded state. Unfortunately, this causes the timeline to reset to 0, and then to start playing again, which is not expected from the code... What am I doing wrong?
-
Hello, Is it possible to pass $(this) into a timeline so that I can access $(this) as well as the data attributes of an object? In the example pen I'd like to pass data attribute values from buttons into the timeline, ultimately to fade between two images - only after they have each fully loaded. Thanks.
-
Hi, I've been using the TimelineMax library to animate navigation tabs that are loaded via AJAX. The problem that I am facing is that elements that are newly added to the DOM aren't animated, as they haven't been detected when the Timeline was created. Playing the timeline from the start has no effect especially .from() animations The linked codepen demonstrates my problem although I have replaced the AJAX call with a html load function. Thanks in advance
- 2 replies
-
- ajax
- timelinemax
-
(and 2 more)
Tagged with:
-
Is it possible for GSAP to do what I think. Because my idea is to let the Timeline go to a specific child (tweens inside/added to a timeline) and when that tween is finished animating, it will pause. Here's the code sample: HTML <div class="book"> <div class="last page"></div> <div class="page one"></div> ... <div class="cover page"></div> </div> <div id="prevPage"></div> <div id="nextPage"></div> JAVASCRIPT var book_timeline = new TimelineMax({ paused: true }) /* tween children */ .to('.page.cover', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.one', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.two', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.last', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }); $('#nextPage').click(function(){ // code that animates only one (next page) tween inside a timeline then pause book_timeline.play(); }); $('#prevPage').click(function(){ book_timeline.reverse(); }); I want to use GSAP to make my own book flipping div's
- 4 replies
-
- timeline
- play to and pause
- (and 6 more)
-
I'm trying to build a web banner using TweenNano but one of the requirements is that the ad has to stop animating after 30secs. I've been trying to implement the code, but I keep getting errors and I'm not a seasoned enough flash developer to know what the deal is: import com.greensock.*; import com.greensock.easing.*; import flash.events.MouseEvent; import flash.net.URLRequest; var animateTxt = function begin():void { TweenNano.to(seeOthers, 1.5, {alpha:1, delay: 0, ease:Quad.easeInOut}); TweenNano.to(seeOthers, 1.5, {alpha:0, delay:3, ease:Quad.easeInOut}); TweenNano.to(shouldBe, 1.5, {alpha:1, delay:4.5, ease:Quad.easeInOut}); TweenNano.to(shouldBe, 1.5, {alpha:0, delay:7.5, ease:Quad.easeInOut, onComplete:begin}); } animateTxt(); var timer:Timer = new Timer(30000, 1); timer.addEventListener( TimerEvent.TIMER, function(evt:TimerEvent):void { trace('timer launched'); animateTxt.pause(); } ); startBtn.addEventListener(MouseEvent.CLICK, onStart); function onStart(e:MouseEvent):void { animateTxt.play(); } timer.start(); stop(); Any help would be GREATLY appreciated
-
Hey there I'm using video loader to load a video. While this is happening, I have some other image covering the screen. I add the video to the stage, I wait until the load is complete, autoplay is false, buffertime is huge. When loading is complete, I start playing and hide the cover image. My problem is that I see a white screen for a few milliseconds before the video appears. onComplete() :void { coverScreen.visible = false; video.playVideo(); } I tried to mitigate this problem by moving the oncomplete code to some cuepoint at the beginning of the video, but the cuepoint needs to be at time > 0.5 seconds before the problem goes away. this is too long. When can I guarantee that the video will be visible? what event should I be listening to? VideoLoader.PLAY doesn't seem to do the trick. thanks.
-
Hi - I am sure this is really easy but I can not see how I can use the TweenMax.to but play when I get to the frame. I have tried so many combinations. This is my TweenMax.to that will get me to the frame label, but pauses when it gets there. It is controlling a Movie Clip that has frame labels. function Park_Play(e:MouseEvent):void{ TweenMax.to(CharacterMovie, 0.5, {frameLabel:'Park'}); }
-
Hello, I have a question about accessing loaded swf files by SWFLoader class. I am loading swf file and want to play/stop its content on certain event managed by certain function, not autoplay. I have managed to access child clip of loaded swf (see sample code below). But is there a way to "play" directly the loaded swf file, so I do not have to put all my animations into child clips of loaded swf? Thanks up front for any suggestions kuba import com.greensock.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.display.*; import com.greensock.loading.data.*; import flash.display.MovieClip; var clip_var:MovieClip; var myLoader:SWFLoader = new SWFLoader("data/swf/test2.swf", {name:"nameSwf", container:container_mc, autoPlay:false, onComplete:completeHandler} ); //start loading myLoader.load(); function progressHandler(event:LoaderEvent):void { //trace("progress: " + event.target.progress); } function completeHandler(event:LoaderEvent):void { trace(event.target + " is complete!"); clip_var = myLoader.getSWFChild("clip_test") as MovieClip;//GET CHILD CLIP OF LOADED SWF (NAMED "clip_test") } function errorHandler(event:LoaderEvent):void { trace("error occured with " + event.target + ": " + event.text); } function swfPlay(e:MouseEvent):void { clip_var.play(); } stage.addEventListener(MouseEvent.CLICK, swfPlay);