jiggy1965

Actually, I stumbled on a solution that works just as wel without having to adjust any valuesl. By using the roundProps modifier which does a Math.round on the x value in this case. I guess without it, the x value of the slide1 and slide2 tween sometimes aren't exactly the same as the one would be rounded down and the other rounded up at certain times. Resulting in this thin sub pixel pixel of space in between. Here is the same setup but with roundProps applied. https://codepen.io/coder1965/pen/abMOWMa

I've added two images side by side. The one is at left 0px and the second at left 300px. I wish to slide them 300 to the left simultaneously which basically works. https://codepen.io/coder1965/pen/ExMjWvK One thing I'm noticing though is when the images are tweening, they are slightly out of position. A very tiny hairline space appears in between them. Like there is some millisecond delay between the first image sliding and the second. At the end of the tweens the two images appear nicely side by side again. I guess I could combine those two images into one div and then slide that one div, but I wish to create an image slider where two of bunch of images slide side by side to the left so each image should remain in it's own div. I tried to console log the positions of both images during the tween and at all times the positions match and both images should be side by side seamlessly without any hearline space like in attached image. What is causing that slightly out of sync/position of the two images during a tween and how could I fix it?

I've changed the setup a bit and removed the timeline's and replaced them with gsap.set / gsap.to https://codepen.io/coder1965/pen/dygjyZd Eventually I wish to create a vertically rotating carousel with 4 of such red divs, but that's for later. You can see what is going wrong with this first one: If you click once on 'right' the red div goes up (correct). Click again and it goes to the bottom (correct). Click a third time and instead of moving up to the center it goes to the center directly (not correct). That is when I'm using this line: gsap.set(tweens[0].target, tweens[0].config); If you comment that line and uncomment the line under it: gsap.set('#slide', {scale:1, opacity:1, zIndex:10, y:containerMiddle }); Then it works like intended. Click right once and it goes up smoothly, click right twice and it goes down smoothly, click a third time and it goes back to the center smoothly. So I was wondering why gsap.set(tweens[0].target, tweens[0].config) doesn't make it work and goes abruptly to the center on a 3rd click. While tweens[0].config is the same as '{scale:1, opacity:1, zIndex:10, y:containerMiddle}'. What also works is to put that line between a spread operator like this: gsap.set(tweens[0].target, {...tweens[0].config}). There seems to be something with the 'set' comment that makes it having problems with passing values in an array form for the configuration? Can you explain this?

What I found out so far is that it does work when I set it up through a spread operator: tl1.set(tweens[0].target, {...tweens[0].config}); Then when I click on the buttons, each tween happens as it should. When I use this: tl1.set(tweens[0].target, tweens[0].config); Then when I click the buttons it goes correctly until the last of the 3 tweens has executed. Then a click makes it pause on its current position. A next click makes it jump to the position it was supposed to go and then continues with the next tween. So like in above codepen if you click on 'Right' (or 'Left') a few times. Why do I have to use the spread operator on tl1.set to make it work? And why don't I have to use a spread operator then on the tl1.to tweens?

I've got a setup where I can have the red div appearing to rotate to the back and to the front again. With 'tl1.set(tweens[0].target, tweens[0].config);' I first have the div set to the middle of the container div. Then with the buttons I can for example have it move up if I click the 'right' button'. On a next click it goes to the bottom and when I click again it should return to the middle. But that doesn't happen. It stays at the bottom. But when I click again, the next tween appears to start from the middle. As if that last tween (from the bottom to the middle) programatically worked, but not visually. So this didn't work: tl1.set(tweens[0].target, tweens[0].config); But strangely enough this does work: tl1.set('#slide', {scale:1, opacity:1, zIndex:10, y:containerMiddle }); And that is the same basically as the content of tweens[0].config = {scale:1, opacity:1, zIndex:10, y:containerMiddle } So why doesn't it work when I set the starting position through an array value, but it doesn't work when I set the starting position not in array form, though the content is the same? When using tl1.set('#slide', {scale:1, opacity:1, zIndex:10, y:containerMiddle }); you can see that clicking on the buttons make the tweens work as normal (goes from the center to up to down to the center to the top etc.) When using tl1.set(tweens[0].target, tweens[0].config); Then it also works until the last tween of case:3. When I click then, that last tween appears not to have happened, but when I click yet again the first tween starts again, but from the middle. As if that last tween was visually skipped, but happened anyway. Can someone explain this?

What I expected was for the animation to repeat fluently without delays, but apparently I used 'start' wrong. Or rather the timing of it. When I used this: tl.set('#red', {y:75}, 'start'); tl.to('#red', {y:150, duration:1}, 'start+=1'); tl.to('#red', {y:0, duration:1}, 'start+=3'); tl.to('#red', {y:75, duration:1}, 'start+=5') It worked like I expected. With 1 second between each frame and when it repeats it starts with that same 1 second delay. In my first code it appears like somehow an extra second was added before the start of the repeat, but what was because of that start+=1 in the first tween (while the other 2 tweens followed up on each other directly without a 1 second pause). So that is solved.

I'm a bit puzzled... I've got this red element that should move down, up and back to the middle of the container div again. So I start by setting it to y:75. Then a second later it moves down to the bottom. When the timeline is at second 2 it moves up to the top and when the timeline is at second 3 it moves to the middle again. And then it should repeat, for which I've used repeat:-1. The problem is that there seems to be a slight delay before the animation starts from the start again. When it repeats it should wait until 1 second pas past (to run the y:150 line) etc. But it look like it is waiting a second or 2 before it restarts again. What am I doing wrong?

I've set up a staggering animation which uses 3 tweens. 'Slide' starts at the center, then moves up, goes down and back to the middle again. I'm using a stagger to make the three 'slide' divs do the same animation but with a 2 seconds delay. It sort of works, but what I want is to have this repeat indefinitely. But the problem is that at the end when the first slide is at the middle again, it waits for slide 2 and slide 3 to arrive at the middle again. Then it repeats the 3 tweens again. What I want is that when slide 1 has returned in the middle, it then repeats its animation while slide 2 and 3 are on its way to get back. What I've tried then is to add {stagger:2, repeat-1} on each tween, but then it repeats each single tween and stuff begins to animate weirdly. How to I set this up correctly so that the animations repeat themselves fluently?

Sure, no problem. So when I use an external function for onUpdate that function is only called once an in Console I only get to see 50 without it going up: https://codepen.io/coder1965/pen/eYMvybq?editors=1111 When I put the same function inside the onUpdate function however it works as expected. In the Console I get to see 50 go up to 100: https://codepen.io/coder1965/pen/poLepGY?editors=1111

I'm trying to use an external function which onUpdate could call: <!doctype html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> </head> <body> <div id="slider"></div> <script> var tl = gsap.timeline(); var value = {startvalue:50}; var targetvalue = 100; tl.to(value, {startvalue:targetvalue, duration:2, ease: Power1.easeOut, onUpdate: updateslider(value.startvalue) }); function updateslider(x) { console.log(x); }; </script> </body> </html> The problem is that this onUpdate is only called once. I get to see '50', the starting value, but it doesn't go up to '100'. When I don't use an external function and put the function inside onUpdate it works as expected though and I see the number go up from 50 to 100: <!doctype html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> </head> <body> <div id="slider"></div> <script> var tl = gsap.timeline(); var value = {startvalue:50}; var targetvalue = 100; tl.to(value, {startvalue:targetvalue, duration:2, ease: Power1.easeOut, onUpdate: function(){console.log(value.startvalue)} }); </script> </body> </html> Shouldn't it be possible to have onUpdate execute an external function with every update?

Like I said, 'stupidly easy' Thanks! https://codepen.io/coder1965/pen/zYzdMvQ

Here is what I'm trying to do. I've added an eventlistener on a class. As I'm having multiply divs with a centered image. When I'm hovering on that div/image, the image inside that particular div should zoom in a bit. And back again when the mouse leaves that div. I've tried to do that, but when I hover on any div/image, all the images in all divs zoom in and out, not only the image which is hovered on. I guess I could duplicate multiple functions. One for wrapimage1, wrapimage2, wrapimage3 etc., but of course I wish to use only one mouseenter/mouseleave function and only have 'animation' played on the wrapimage which is hovered over. Can't figure out how I could pick up on which wrapimage is being hovered over so that animation.play() only runs on that particular wrapimage. Can anyone help me out? Probably something stupidly easy

Fail to understand something here. gsap.to it works: the movement occurs after 3 seconds. When I use gsap.from it doesn't: the movement occurs straight away instead of waiting 3 seconds. When I want the box to move from 100px to 400px and add that 3 seconds as the position parameter it moves after 3 seconds. When I want it to move from 400px to 100px with the same 3 seconds as the position parameter it moves straight away. Why is this happening? I'm probably missing something very simple...

That was indeed it (I'm using the 2019 version of Animate). Got it working now. But I am curious though... The stagger runs nicely through all letters from left to right. That's probably the order (left > right) that they are placed once the textfield is broken down to letters. When I would move the letters in that clip around it would still stagger in that same order. Even if I would move letter two to the left of letter one. Was wondering what to do when I would like to have the same result when using a movie clip filled with various shapes instead of letters. And how to set the order in which those shapes should stagger. I would probably have to create some individual movie clips inside the container movie clip and then create an array variable in which to set each array index to a specific shape movie clip? Something like clips[1] = this.clip1 ? And then using the same way (using .children) to tween all individual children of that container clip in the order in which they are used in that array variable?

Never mind, figured out that I had to add that script 1 frame later than the actual text movie clip on frame 1