jiggy1965

Yes, but I'm talking about keyframes in an Adobe Animate file . I've included the GSAP library in my Adobe Animate file and in Animate I've got 100 keyframes. Now I wish to use tween.to to make it go to specific keyframes of my Adobe Animate file. Kinda like this.gotoAndStop(50) in Adobe Animate. But I'm not sure whether I can target Adobe Animate keyframes through GSAP.

Is it possible to tween to a specific frame of my Adobe Animate Timeline? Let's say I've got an Animate file with 100 frames with a keyframe animation moving a ball from left to right. And instead of running that I wish to control that with GSAP. Tweening to keyframe 50 for example. Something like this, which doesn't work: this.stop(); tl = new TimelineMax(); tl.to(this.root, 2, {frame:50}) Using something like this should make the tween move from keyframe 0 to 50 but it does nothing. Is such a thing possible?

Well, as you can see in my previous post, I kinda developed a workaround. My slideshow has 3 squares of 300x300 next to each other. They will be moving from 0 to -300 to -600 and back again to -300 to 0. Those are three x locations it will go to. I simplified those to 0, 1 and 2 and used either of those values to calculate which x location the slider should move to during a click. Even when it's already sliding, so I could click when it's e.g. on -450 and it would either move to -600 or -300. And by using 0, 1 and 2 I'm making sure the slider doesn't slide past -600 or higher than 0 which would lead to empty slides. It does exactly what I was after now. See below example: Slider example

Already developed a better looking code. I can now also start a tween the other way around when it has already started tweening. Here it is. this.stop(); this.buttonright.addEventListener("click", slideright.bind(this)); this.buttonleft.addEventListener("click", slideleft.bind(this)); function slideright() { tl = new TimelineMax(); var distancepoint = this.slides.x; var distance = Math.abs(Math.round(distancepoint / 300)); if ((distance >= 0) && (distance < 2)) { tl.to(this.slides, 1, { x: -(distance * 300) - 300, ease: Power2.easeOut }) } } function slideleft() { tl = new TimelineMax(); var distancepoint = this.slides.x; var distance = Math.abs(Math.round(distancepoint / 300)); if ((distance > 0) && (distance <= 2)) { tl.to(this.slides, 1, { x: -(distance * 300) + 300, ease: Power2.easeOut }) } } slider.fla

What I also was wondering about was, instead of checking if the tween is running before doing a -=300 or +=300, if it would also be possible to do a -= or += but have it stop at certain locations. So for example, if the slider was at x=300 and I would click the right button it would do its x:"+=300". If I were to click again when it's at x=400 it should do another x:"+=300", but it should nonetheless stop moving when x=600 has been reached. Otherwise it would continue to x=700. Would there be a way to do that as well?

Using Animate and including the GSAP library I've made a basic slideshow containing three slides. I've added two buttons to make the slider go left and right. When pressing the left arrow the slider should go from x=0 to x=-300 and pressing again to x-600 and nor further than that. When pressing the right arrow the slider should go from x-600 to x-300 to x=0 and no further than that. I was faced with two problems. First the arrows should make the slider only tween when it isn't going through a +=300 or -=300 tween. Otherwise, when pressing the button halfway while it's tweening between such a step it would add or substract another 300. Second the tweening should go any more to the left when x=-300 and no higher then when it's x=0. Otherwise it could continue to slide to a blank area. I managed to do it using below code, but was wondering if there was a more elegant sollution. Perhaps using some Math function instead of checking for that integer. Or to use an if statement which checks first if the slides object is between -600 and 0 and has the tween stopped when those minumum / maximum values have been reached. Below my code and attached the file. Is there a far more elegant en safer method to doing what I wanted? this.stop(); this.buttonright.addEventListener("click", slideright.bind(this)); this.buttonleft.addEventListener("click", slideleft.bind(this)); function slideright() { tl = new TimelineMax(); if (Number.isInteger(this.slides.x / 300) && (this.slides.x > -600)) { tl.to(this.slides, 2, { x: "-=300", ease: Power2.easeOut }) } } function slideleft() { tl = new TimelineMax(); if (Number.isInteger(this.slides.x / 300) && (this.slides.x < 0)) { tl.to(this.slides, 2, { x: "+=300", ease: Power2.easeOut }) } } slider.zip

Never mind, already found out var loop=1; var tl = new TimelineMax({repeat:1}); btn = new TimelineMax(); // start animation tl.from("#text1", 1.5, {x:-340, ease: Back.easeOut.config(1.7), scale:2}, "start+=.5"); tl.from("#text2", 1.5, {x:-340, ease: Back.easeOut.config(1.7), scale:2}, "start+=1"); tl.from("#text3", 1.5, {x:-340, ease: Back.easeOut.config(1.7), scale:2}, "start+=1.5"); tl.from("#text4", 1.5, {x:-340, ease: Back.easeOut.config(1.7), scale:2}, "start+=2"); tl.add( function(){if(loop==2){tl.stop()} else {loop++}}) tl.to("#text1", 1.5, {opacity:0}, "start+=5"); tl.to("#text2", 1.5, {opacity:0}, "start+=5"); tl.to("#text3", 1.5, {opacity:0}, "start+=5"); tl.to("#text4", 1.5, {opacity:0}, "start+=5");

var tl = new TimelineMax({repeat:2}); btn = new TimelineMax(); // start animation tl.from("#text1", 1.5, {x:-340, ease: Back.easeOut.config(1.7), scale:2}, "start+=.5"); tl.from("#text2", 1.5, {x:-340, ease: Back.easeOut.config(1.7), scale:2}, "start+=1"); tl.from("#text3", 1.5, {x:-340, ease: Back.easeOut.config(1.7), scale:2}, "start+=1.5"); tl.from("#text4", 1.5, {x:-340, ease: Back.easeOut.config(1.7), scale:2}, "start+=2"); tl.to("#text1", 1.5, {opacity:0}, "start+=5"); tl.to("#text2", 1.5, {opacity:0}, "start+=5"); tl.to("#text3", 1.5, {opacity:0}, "start+=5"); tl.to("#text4", 1.5, {opacity:0}, "start+=5"); So I have above animation. Some texts that slide in and fade out. I'm having this repeated twice, but during the last loop it shouldn't fade out but pauze in the middle so the text stay on screen at the end. How would I have to do that?

That indeed worked. Thanks. Wondering though: when using mouseout and mouseover dit it work when I used TweenMax.to and didn't when I used the bin TweenliteMax like above?

I've created a simple banner animation with a mouseover effect that simply changes color of the button. Below doesn't completely work $( document ).ready(function() { tl = new TimelineMax(); btn = new TimelineMax(); // start animation tl.from("#text1", 1.5, {x:-340, ease: Back.easeOut.config(1.7)}, "start+=.5"); tl.from("#text2", 1.5, {x:-340, ease: Back.easeOut.config(1.7)}, "start+=1"); tl.from("#text3", 1.5, {x:-340, ease: Back.easeOut.config(1.7)}, "start+=1.5"); tl.from("#text4", 1.5, {x:-340, ease: Back.easeOut.config(1.7)}, "start+=2"); //tl.from(".logostaand", 2, {opacity:0, y:-100, ease:Back.easeOut, rotationY:180, scale:4}, "start") // end amination // creates hand cursor $('.container').css('cursor', 'pointer'); // mouseover $( ".container" ).mouseover(function() { //animation btn.to("#button", 1, {backgroundColor:"#5CB130", scale:1.2, transformOrigin:"0% 50%"}); console.log ('over'); }); //mouseout $( ".container" ).mouseout(function() { // animation btn.to("#button", 1, {backgroundColor:"#3460A9", scale:1, transformOrigin:"0% 50%"}); console.log ('out'); }); // clicktag function $( ".container" ).click(function() { //ExitApi.exit(); }); // makes container visible when animation starts $(".container").css("visibility", "visible"); }); What happens is that the button changes color, but it does that repeatedly. It's like during the transform it fires a mouseover/mouseout repeatedly. When I change btn.to to TweenMax.to however it works like I expect it to. It just fires 1 mouseover and does it's thing and on mouseout changes back again. What am I doing wrong?

I'm clueless, but I can't understand why the tree image is visible outside the red container div. Only when I change the class 'tree' in the html to something random it works like I expected: the tree image is cut off from outside the red div. Only when I use 'tree' as the class name and animate it through GSAP overflow:hidden on the container div seems not to work anymore? What am I doing wrong?

Thanks. I tried that in above file: function runAnimation() { var tl = new TimelineMax(); tl.from('.logo_efteling', 4, { top:"100px", ease: Back.easeOut.config(4), immediateRender:false }, "+=1"); } That works in that it doesn't really stay static (while it moves with tl.to). But what it does then is first show the logo in its top position and immediately after that the 100px position. Like it move in 4 seconds from frame 1 immediately to frame 2, without the appearance of moving/tweening. Also tried fromTo and than it more or less moves again, but with a weird shaking effect when it starts moving. Perhaps still some Mustache generating problem?

I you check out the update version for example: new example This now works as in the js file I've added that animation part as a function inside the mustache generating code below so it runs when that generating part is done. But if you change: tl.to('.logo_efteling', .75, { top: -33, ease: Back.easeOut.config(4) }, "+=1"); into this: tl.from('.logo_efteling', .75, { top: 50, ease: Back.easeOut.config(4) }, "+=1"); The logo just stays static. For some reason something doesn't like 'to.from'. Can't explain that...

Thanks for the update. I already found where to put the code in my file. I just added the animation part as the last lines of the mustache generating code: productsInstance.on('itemShow', function(node, data) { node.innerHTML = dhtml.mustache('item', { products: data, custom_price: (parseFloat(data[0]['product_price'])).toFixed(0), target: dhtml.getVar('landingPageTarget', '_blank') }); tl = new TimelineMax(); tl.to('.logo_efteling', 4, {top: 200, ease: Back.easeOut.config(4) }, "start+=1"); }); That function generated the code and any code after that would be executed. As far I could see there isn't a mustache 'unready' and it just runs like html synchronous. So I've got that figured out. One thing strange though: when using tl.to and tl.fromTo in above added lines it animates, but when using tl.from it doesn't . The same code but with tl.from like below doesn't work: productsInstance.on('itemShow', function(node, data) { node.innerHTML = dhtml.mustache('item', { products: data, custom_price: (parseFloat(data[0]['product_price'])).toFixed(0), target: dhtml.getVar('landingPageTarget', '_blank') }); tl = new TimelineMax(); tl.from('.logo_efteling', 4, {top: 100, ease: Back.easeOut.config(4) }, "start+=1"); }); the logo just stays static. Can anyone give an explanation for that? What can it be that doesn't like the tl.from? Is it the html, css, js or mustache?

Could you perhaps have a look into my file? I'm trying to animate the logo a bit, but it still doesn't. And I've put the code between $( document ).ready(function() now and I used the most recent GSAP. The logo is generated through Mustache. Why won't the logo still not animate? https://we.tl/qJtrfU2APh

Ok, so better from now on to put any tween code between something like: $( document ).ready(function() { // tween code }); (or windows.onload) Forgot about that one because 9 out of 10 times it will work without, but I can understand that it would take a while for mustache to generate the content and that the tween code would have run before it. I often forget out that cause in most tutorials it often isn't written out. But will remember from now on. Thanks

Well usually I put this in the bottom of the html file: <!-- load TeenMax here --> <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script> To load the tweenMax library. And in a seperate js/main.js file I put the animation code like this: // start animation tl = new TimelineMax(); tl.from('.logo', .75, {opacity:0, top:-100, ease:Back.easeOut.config(4)}, "start"); And that always works. But you're saying that it's best to put that last code, the animation, between a window.onload = function() ?

I've created a small example to demonstrate: EXAMPLE The text which is generated by Mustace is animating, but that animating is done through css. If you delete this part: @keyframes example { from {top:300px;} to {top:0px;} } .animate { animation-name: example; animation-duration: 4s; } Than the GSAP animation does nothing. It's like CSS does recognize the 'animate' class that Mustache about to generate and can target it to animate, but GSAP doesn't see 'animate' just yet and won't see it because Mustache isn't literally putting that generated code in the source code

I'm working on a Product DCO banner I would like to animate further. The content of a feed is loaded into the banner through a Mustache script. I noticed that I can't animate that content Mustache generates when using GSAP. Probably because it can't 'see' the objects I'm trying to animate. Cause that content isn't there when I go to 'source code'. That content is loaded through the Mustache script and not embedded directly inside the html source code. With css3 animations however I CAN animate that Mustache generated content. Is that normal? That I can't animate Mustache generated content with GSAP/js, but can animate the same content with CSS? With GSAP I can only animate the html that is there to see in the source code. Like the container div in which the content generated by Mustache would be virtually placed. While with CSS I can generated that content even when it isn't viewable when going to the html source code.

Already found it myself. By starting 'sliderstart' at zero. Which would make it go smoothly from front to back and front again since those 4s aren't added up between the last and first A. Then it would run form the start but I fixed that by adding a delay in the TimeLineMax line. slider = new TimelineMax({repeat:10, delay: 4}); slider.to('#frames', 3, {left:"-=100", ease:Power4.easeInOut}, "sliderstart"); slider.to('#frames', 3, {left:"-=100", ease:Power4.easeInOut}, "sliderstart+=4"); slider.to('#frames', 3, {left:"-=100", ease:Power4.easeInOut}, "sliderstart+=8");

Running against a slight animation problem: Have a look at this my Codepen. https://codepen.io/anon/pen/WEVJjw The image consists of 4 slides. The first and last are the same but there is a reason for that. The total images slides to the left from A to the other A and then it should repeat from the first A again. I've added that final A so that when it jumps back, it looks like the animation continues several times more. But I have a slight timing issue. As you can see at 4 seconds it slides to the left in 3 seconds. Then at 8 and 12 seconds again. I've set the timeline to 'repeat' so it does that 10 times, jumping back to the start each time. But now when it jumps back form the last A to the first, it takes too long to move from A to B again. The first slides from A-B, B-C, C-A last 4 seconds each. Then it returns to the first slide again, ready to repeat the process, but it looks like it then waits about 6 seconds to do its slide from A-B again. It's like it's adding one extra 'sliderstart+=4' between the last tween and the first when it repeasts again. How can I fix this?

Yes, that's indeed what I was looking for. I just happened to found out a similar way using a for-loop: example2 But that function of yours is even better. Thank you very much!

Ok, my goal was indeed to reduce the amount of code. In instances where I would for example have 20 similar lines and wanted to reduce that. But that wouldn't be possible? Or could I reduce the number of lines somehow by putting it between a for-loop somehow? Take this example Example There are 5 lines of tween code here. Could that be put between a loop somehow? Where it reads the position of 'logo', adds 100px to the right, pauze for 2 seconds, returns to the beginning of the loop, reads the current position of 'logo' again etc. In some kind of 5 step for-loop if you know what I mean.

I'm trying to discover is there is a more efficient way of doing what I want. I've got an div 1200 px wide and I want to tween that right to left in steps of 300 with an easeBack. So first it tweens 300 to the left with an easeBack, then it should stop 1,5 seconds, than continue to tween to the left 300 again, stop 1,5 seconds, tween 300 px further etc. I could of course add 4 lines of tween code and make it tween 300 pixels in all 4 lines, but perhaps there is a way of putting all of that in one line? Sort of like 'tween 1200 px to the left, but every 300 pixels wait for 1,5 minute'? I think a steppingEase wouldn't work since I wish to have an easeBack throughout? Basically I now have this: tl.to('.products', 3, {left:-300, ease:Expo.easeOut}, "start+=4"); tl.to('.products', 3, {left:-600, ease:Expo.easeOut}, "start+=7"); tl.to('.products', 3, {left:-900, ease:Expo.easeOut}, "start+=10"); But I would like to know if something like that could be but in one line. Something like this: tl.to('.products', 3, {left:"+=-300", ease:Expo.easeOut, repeat:3, repeatDelay:3}, "start+=4"); But without the 'repeat' of course. It should first move 300 to the left from whatever its current position is, then have a delay of 3, then continue 300 more from its current position (which would now be -300), wait 3 seconds again etc.

Perfect! Didn't know about xPercent/yPercent before so learned something new