Search the Community
Showing results for tags 'sequence'.
-
Hi GSAP community. 2 image sequences 2 canvas' Text appears in the middle/between the 2 sequences Each image sequence renders to their respective canvas. I would like some help setting things up so that the 2 sequences become 1 longer sequence rendering to 1 canvas. But I need the ability to pause or hold this longer single sequence at a particular frame number, so I can animate (text for example), at specific points in the sequence. Please note, if this is achievable I will scale things up to a much larger sequence which will require very specific control to be able to hold/pause (for a declared period of time) at multiple points in the timeline at specific frame numbers etc. To help things along I have a folder at the same location as the other folders called "000" so replace the first sequence's location "001" with "000". - There are 51 images in the "000" folder and the first pause point would be at frame "26" if we are to replicate my codpen example. Thanks guys. ?
- 9 replies
-
- scrolltriger
- sequence animation
-
(and 1 more)
Tagged with:
-
Hello fellow "gsapers", I'm looking for some guidance on how to achieve the effect i want. The main effect i want its like this codepen i linked. I have an dinamic array of section that will be pinned just like that codepen, but then each one of those sections will have an image sequence. When the image sequence of one section ends then it should transition to the next section, and then start the corresponding image sequence (all this controlled by user scrolling). I got the sections transition working just like the codepen, but i dont know how to approuch to make the transition wait until the section image sequence end and then do the section change. I would be very thankfull if someone could point me in the right direction. I'm a bit lost, and still new to gsap.
-
Hi everyone, I'm trying to create an image sequence that can be played backwards or forwards by scrolling the page up and down. But I also need the sequence to be controllable using a video style progress bar. Using some of the code that I've copied from these forums I've managed to get the image sequence working and I've also managed to create a play bar control with a playhead that can be dragged left and right. But I can't get the playhead to control the current image that is displayed in the image sequence. In the code for the image sequence I specify the number of frames, so I'm assuming I need to divide the length of the progress bar into an equivalent number of 'units' and then advance or rewind the image sequence every time the play head is dragged by one 'unit'.
- 8 replies
-
- scrolltrigger
- draggable
- (and 4 more)
-
Hello everyone, I used a code that I found here: https://greensock.com/forums/topic/20404-flickering-png-sequence/ Thanks to @OSUblake. My problem: I have a jpg sequence animation (240 frames) and I would like to navigate between the different frames. Go from 0 to 100 or from 150 to 20. I can go forwards but not backwards. On the first click the animation works but when I click again nothing happens Here is my code: HTML <button class="btn btn1">BOUTON1</button> <button class="btn btn2">BOUTON2</button> <button class="btn btn3">BOUTON3</button> <canvas id="canvas"></canvas> JAVASCRIPT var baseURL = "anim3/"; var canvas = document.querySelector("#canvas"); var context = canvas.getContext("2d"); var sprite = { frame: 1, lastFrame: 240, totalFrames: 240, textures: [] }; var animation = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite}) .to(sprite, 2, { frame: 100, roundProps: "frame", ease: Linear.easeNone }); var animation2 = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite}) .to(sprite, 2, { frame: 150, roundProps: "frame", ease: Linear.easeNone }); var animation3 = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite}) .to(sprite, 2, { frame: 2, roundProps: "frame", ease: Linear.easeNone }); loadTextures(sprite.totalFrames) .then(resizeCanvas) .catch(function(reason) { console.log(reason) }); function drawSprite() { // No changes if (sprite.frame === sprite.lastFrame) { return; } context.drawImage(sprite.textures[sprite.frame], 0, 0); sprite.lastFrame = sprite.frame; } function resizeCanvas(textures) { var texture = textures[0]; sprite.textures = textures; canvas.width = texture.naturalWidth || texture.width; canvas.height = texture.naturalHeight || texture.height; canvas.classList.add("is-loaded"); var aspectRatio = canvas.height / canvas.width; // BASE base_image = new Image(); base_image.src = 'anim3/animhead_01.jpg'; base_image.onload = function(){ context.drawImage(base_image, 0, 0); } } function loadTextures(numTextures) { var promises = []; for (var i = 1; i <= numTextures; i++) { var index = i < 100 ? "0" + i : i; promises.push(loadTexture(baseURL + "animhead_" + index + ".jpg")); } return Promise.all(promises); } function loadTexture(path) { return new Promise(function(resolve, reject) { var img = new Image(); img.onload = function() { resolve(img); } img.onerror = function() { reject("Error loading " + path); }; img.src = path; }); } $( ".btn1" ).click(function() { animation.play(); }); $( ".btn2" ).click(function() { animation2.play(); }); $( ".btn3" ).click(function() { animation3.play(); }); Someone can help me ? Thank you.
-
//old way tl.add([ //single hop TweenMax.fromTo("#tail1", 0.25, {rotation: 24},{rotation: -24, ease: Power1.easeInOut}), TweenMax.to("#tail1", 0.1, {rotation: 0, ease: Power1.easeIn}), TweenMax.to("#tail1", 0.4, {rotation: 24, ease: Power3.easeOut}), ],0, "sequence"); //new way tl.add([ //single hop gsap.fromTo("#tail1", 0.25, {rotation: 24},{rotation: -24, ease: "power1.inOut"}), gsap.to("#tail1", 0.1, {rotation: 0, ease: "power1.in", delay: .25}), gsap.to("#tail1", 0.4, {rotation: 24, ease: "power3.out", delay: .35}), ],0); Hi! This is my first ever post in the forums, but I've gotten so much valuable information from here over the past several years, so first and foremost, this community has my great appreciation. After over a year having not directly touched banner/GSAP animation, I recently dove back in and saw some amazing new things had happened with the new GSAP. But then I saw something I was quite sad about...like, it surprised me just how sad haha. One of my favorite ways to break out smaller pieces of complex animations was with the method under "//old way" in the code snippet (the codepen is just an example of one such complex animation where these tween arrays were extremely helpful). It was a beautiful thing to animate freely with any combination of 'from, to, fromTo, and set' then slap a "sequence" after the position parameter and know that the whole little sequence could then be moved around on the timeline without the need for further nesting timelines or doing a bunch of math for delay values. You could even add negative delays to get some overlap if desired—it was slick! Under "//new way," durations of tweens get added for the delay value of the next tween. It works the same way as "sequence" did, but it's more work, and animating becomes a pain as you're dialing it in because you have more things to change. Is there any hope for the "sequence" method on tween arrays to make a comeback? It's also very likely that I'm not versed enough in the new GSAP to know there's something better, faster, and stronger than my beloved "sequence". I am aware of the new keyframes method, which seems super cool, but as far as I know, not as cool for two reasons: you can't combine "from/fromTo/to" within the keyframe sequence, and you can't mix targets within the keyframes. That makes sense when you think of them strictly as keyframes, but I miss the flexibility. Have I missed something with the keyframes method? Or is there some other new method that I should explore? I appreciate any thought toward this, and I'm curious to know if I'm alone or if anyone else feels like something has been lost here.
-
Note: TimelineLite has been deprecated in GSAP 3 (but GSAP 3 is still compatible with TimelineLite). We highly recommend using the gsap.timeline() object instead. While GSAP 3 is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. You can think of a TimelineLite instance like a container where you place tweens (or other timelines) over the course of time. build sequences easily by adding tweens with methods like to(), from(), staggerFrom(), add(), and more. tweens can overlap as much as you want and you have complete control over where they get placed on the timeline. add labels, play(), stop(), seek(), restart(), and even reverse() smoothly anytime. nest timelines within timelines as deeply as you want. set the progress of the timeline using its progress() method. For example, to skip to the halfway point, set myTimeline.progress(0.5); tween the time() or progress() values to fastforward/rewind the timeline. You could even attach a slider to one of these properties to give the user the ability to drag forwards/backwards through the timeline. speed up or slow down the entire timeline using timeScale(). You can even tween this property to gradually speed up or slow down. add onComplete, onStart, onUpdate, and/or onReverseComplete callbacks using the constructor’s vars object. use the powerful add() method to add labels, callbacks, tweens and timelines to a timeline. base the timing on frames instead of seconds if you prefer. Please note, however, that the timeline’s timing mode dictates its childrens’ timing mode as well. kill the tweens of a particular object with killTweensOf() or get the tweens of an object with getTweensOf() or get all the tweens/timelines in the timeline with getChildren() If you need even more features like, repeat(), repeatDelay(), yoyo(), currentLabel(), getLabelsArray(), getLabelAfter(), getLabelBefore(), getActive(), tweenTo() and more, check out TimelineMax which extends TimelineLite. Sample Code //instantiate a TimelineLite var tl = new TimelineLite(); //add a from() tween at the beginning of the timline tl.from(head, 0.5, {left:100, opacity:0}); //add another tween immediately after tl.from(subhead, 0.5, {left:-100, opacity:0}); //use position parameter "+=0.5" to schedule next tween 0.5 seconds after previous tweens end tl.from(feature, 0.5, {scale:.5, autoAlpha:0}, "+=0.5"); //use position parameter "-=0.5" to schedule next tween 0.25 seconds before previous tweens end. //great for overlapping tl.from(description, 0.5, {left:100, autoAlpha:0}, "-=0.25"); //add a label 0.5 seconds later to mark the placement of the next tween tl.add("stagger", "+=0.5") //to jump to this label use: tl.play("stagger"); //stagger the animation of all icons with 0.1s between each tween's start time //this tween is added tl.staggerFrom(icons, 0.2, {scale:0, autoAlpha:0}, 0.1, "stagger"); Demo See the Pen TimelineLite Control : new GS.com by GreenSock (@GreenSock) on CodePen. Watch The video below will walk you through the types of problems TimelineLite solves and illustrate the flexibility and power of our core sequencing tool. Learn more in the TimelineLite docs. For even more sequencing power and control take a look at TimelineMax.
- 1 comment
-
- not-displayed
- timelinelite
- (and 9 more)
-
Note: TimelineMax has been deprecated in GSAP 3 (but GSAP 3 is still compatible with TimelineMax). We highly recommend using the gsap.timeline() object instead. While GSAP 3 is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. TimelineMax extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() (and probably more in the future). It is the ultimate sequencing tool that acts like a container for tweens and other timelines, making it simple to control them as a whole and precisely manage their timing. Its easy to make complex sequences repeat with TimelineMax and there are plenty of methods and events that give you complete access to all aspects of your animation as shown in the demo below. See the Pen Burger Boy Finished / TimelineMax page by GreenSock (@GreenSock) on CodePen. Interesting note: The animation in the banner above is a mere 11 lines of TimelineMax code. The next demo illustrates many of the things TimelineLite and TimelineMax handle with ease, such as the ability to: insert multiple tweens with overlapping start times into a timeline create randomized bezier tweens control the entire set of tweens with a basic UI slider repeat the animation any number of times dynamically adjust the speed at runtime. Notice how the play / pause buttons smoothly accelerate and deccelerate? See the Pen Burger Boy Finished / TimelineMax page by GreenSock (@GreenSock) on CodePen Be sure to check out TimelineLite for more info on all the capabilities TimelineMax inherits. The chart below gives a birds-eye look at the methods these tools provide. ul.chart { width:360px; float:left; margin-right:30px; } ul.chart li:nth-child(1){ font-weight:700; list-style:none; margin-left:-20px; font-size:20px; margin-bottom:20px; } TimelineLite and TimelineMax Methods add() addLabel() addPause() call() clear() delay() duration() eventCallback exportRoot() from() fromTo() getChildren() getLabelTime() getTweensOf() invalidate() isActive() kill() pause() paused() play() progress() remove() removeLabel() render() restart() resume() reverse() reversed() seek() set() shiftChildren() staggerFrom() staggerFromTo() staggerTo() startTime() time() timeScale() to() totalDuration() totalProgress() totalTime() useFrames() Methods exclusive to TimelineMax currentLabel() getActive() getLabelAfter() getLabelBefore() getlLabelsArray() repeat() repeatDelay() tweenFromTo() tweenTo() yoyo()
-
Hey guys, I am new to all of this and trying really hard to create a banner where 3 lines of text stagger in ( from left to right ) then bounce and then slowly fade out. Would also love the option to repeat this every so many seconds. I have explored the repeat -1 option, but cannot find the option to repeat an action every so many second. Question: How can i fade out from where the animation last ended? Thank you guys in advance and Gsap is Awesome!
-
Hi, I'm a novice when it come to this stuff but I've recently set up a holding page for a friend of mine and she wanted a video on it. However I found out that a video is no good in iOS devices as it starts off paused, and you have to click to play it. Therefore I started browsing the net to find a solution, which seemed to be to turn the video into an image sequence. Thats when I found this example codepen http://codepen.io/jamiejefferson/pen/aJcGl So I used the Javascript and bits of the CSS to create my code http://codepen.io/anon/pen/pgrQZO . However as you can see it is very glitchy? I've been trying to iron out the flickering but with no luck. Any ideas how to smooth it all out, as I'm really stuck!? Many Thanks in advance for any help! http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/
- 18 replies
-
- javascript
- jquery
- (and 4 more)
-
Hello! I didn't find any sprite animation plugin for TweenMax and decide to write my own I hope it will be useful for somebody. Github link Demo here I apologize in advance for the quality of the code, this is my first attempt I will be glad to hear comments and suggestions from GSAP masters and all community.
- 11 replies
-
- sprite
- spritesheet
-
(and 1 more)
Tagged with:
-
Hi everyone, Only started using GSAP yesterday, until that point I was using Velocity.js on the basis of the rather disingenuous test that was originally listed on Julian's site (intentionally or not!) So anyway I discovered that GSAP dunks all over it and I wanted in! So, at the moment I'm making a UI pack for GSAP, since that was one of my most used features of Velocity, and it's great for front-end delights. It's going really well and I've taken to GSAP fairly quickly--but some things still elude me. One thing I'm trying to achieve is to do with one of the animations I've made, it's a 'shake', these are my first with multiple tween points, and I'm trying to figure out the way I'd go about successfully staggering a whole sequence on an array of elements. E.g. case 'stagger.shake': animate.to( element, 0.1, {left: "-=" + (nudge/2) + "px", ease:easing} ).to( element, 0.1, {left: "+=" + nudge + "px", ease:easing} ).to( element, 0.1, {left: "-=" + nudge + "px", ease:easing} ).to( element, 0.1, {left: "+=" + nudge + "px", ease:easing} ).to( element, 0.1, {left: "-=" + nudge + "px", ease:easing} ).to( element, 0.1, {left: "+=" + nudge + "px", ease:easing} ).to( element, 0.1, {left: "0px", ease:easing} ); break; My initial approach was something like this: case 'stagger.shake': animate.staggerTo( element, 0.1, {left: "-=" + (nudge/2) + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "+=" + nudge + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "-=" + nudge + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "+=" + nudge + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "-=" + nudge + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "+=" + nudge + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "0px", ease:easing}, stagger ); break; I'm sure one of you guys knows exactly what I'm missing! Seems like a great community here and looking forward to becoming a part of it. GSAP is awesome. And not in the desensitised meaning of the word, like genuinely awesome!
-
I'm new to GSAP. Is there a way to do this with GSAP, with less code? Will it be more performant with GSAP? Thanks, =: s
-
Does anyone know if it's possible to assign a label to a sequence when that sequence is already relative to another label? for instance: tl.to("#redBox", 1, {x:550}, "start") .to("#blueBox", 1, {x:550}, "start+=0.05", "second") .to("#greenBox", 1 {x:550}, "second+=1"); You can see the codepen here http://codepen.io/anon/pen/vLtlg But from this snippit you see that the bluebox starts relative to start, and I want greenbox to start relative to bluebox. Is this possible?
-
Hi Guys, I'm wondering can you give me a little help. I'm using TimelineMax within and for loop and the animations are being messed around... basically it looks like everything is being scarmbled CODE: for(var i:uint = 0; i < attackEnemiesToAnimate.length; i++) { enemyToTrack = attackEnemiesToAnimate[i]; createAnimation(enemyToTrack); if(enemyToTrack.x == stage.stageWidth - 20) { attackEnemiesToAnimate.splice(i,1); this.removeChild(enemyToTrack); enemyToTrack = null; } enemyToTrack = null; } private function createAnimation(e:Enemy):void { var tl:TimelineMax = new TimelineMax(); tl.to(e, 0.5, {x:stage.stageWidth - 100, y:50},1).to(e, 0.5, {x:pirate.x, y:pirate.y},2).to(e, 0.5, {x:-stage.stageWidth - 30, y:-stage.stageHeight - 10}, 3); e = null; tl =null; } Any Suggestions Cheers, John
- 11 replies
-
- timelinemax
- tweening
-
(and 1 more)
Tagged with:
-
Hi all, I've been watching a few tutorials around tweening with the new GSAP for javascript but I'm still wondering how I would go about tweening text. I see that Carl has animated text in his video here: http://www.snorkl.tv...red-javascript/ so I'm wondering if those are just images or css text elements? Text animation in Flash through GS was a breeze which makes me think I'm not approaching the same goal (but in javascript) the right way. Essentially, I have a banner with graphic and text elements that I'd like to animate in a sequence. Are there any tutorials out there for this now? Carl, I know you're probably working on one so if you have time for some insight, I'd appreciate it! thanks!