Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by jiggy1965

  1. 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?
  2. 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?
  3. 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?
  4. 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.
  5. 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?
  6. 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?
  7. 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
  8. 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?
  9. Like I said, 'stupidly easy' Thanks! https://codepen.io/coder1965/pen/zYzdMvQ
  10. 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
  11. 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...
  12. 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?
  13. Never mind, figured out that I had to add that script 1 frame later than the actual text movie clip on frame 1
  14. I've been following your quick Twitter video on animating text, @Carl But for some reason my file doesn't seem to work. I added the GSAP Library, added the broken down text field to create an array of letters and added below code. let letters= this.my_text.children; console.log (letters); let tl = gsap.timeline({repeat:9}) tl.from(letters, {y:100, alpha:0, stagger:0.1, scaleX:0.2, ease:"back"}); tl.to(letters, {y:-50, alpha:0, duration:0.25, stagger:-0.05}, ">0.5"); But I then get the browser console error: GSAP target not found. https://greensock.com Tween — gsap.min.js:10:32341 When I use let letters= this.my_text, without 'children' it works. The entire clip animates. But when I add 'children', the text and letters just freeze and I get this message that the GSAP target can't be found. Both in Safari and Chrome. What am I doing wrong? Attached the Adobe Animate file animatedtext.fla
  15. That was indeed it! It's working now. Thanks a lot
  16. Attached the updated files using this code: var backgroundtarget = this.background; var tl = new TimelineMax({ paused:true }) tl.to(backgroundtarget, 3, {x:100, ease: "sine.out"}) function playAnimation() { tl.play(); } tl.delayedCall(2, playAnimation); As you can see the square now doesn't move at all... test.fla test.html
  17. Tried it, but then the square just keeps on standing still...
  18. I also tried that one: this.stop(); var backgroundtarget = this.background; var tl = new TimelineMax({ paused:true }) tl.to(backgroundtarget, 3, {x:100, ease: "sine.out"}) function playAnimation() { tl.play(); } function reverseAnimation() { tl.reverse(); } tl.delayedCall(2, playAnimation()); But the animation still runs directly instead of with a delay of 2 seconds. Attached the fla file (and the html file). You can see from the html file that the blue square already starts moving from the start. Instead of waiting for 2 seconds test.fla test.html
  19. Yes, more or less. The animation runs after 2 seconds. And on mouseenter that same animation should run without delay. You used restart() for that. Didn't know about that one yet. The problem is that when I do a mouseenter while your cube is rotating it immediately returns to its starting position. After that mouseenter and mouseleave work normally. So the problem occurs while doing a mouseenter on that cube while it rotates for the first time after 2 seconds.. Oh and I don't have a codepen as this one I'm working on is using and Adobe Animate fla file
  20. This for example won't work: var backgroundtarget = this.background var tl = new TimelineMax({ paused:true }) tl.to(backgroundtarget, 3, {x:-200, ease: "sine.out"}) function playAnimation() { tl.play(); } function reverseAnimation() { tl.reverse(); } tl.delay(2); tl.play(); tl.delay(0); At the start I wish to have run playAnmation, but after 2 seconds. Later on on mouseover/mouseout I wish to rund either playAnimation or reversAnimation, but without the 2 second delay. With above code the first autoplay animation still runs immediately without 2 second delay
  21. I used GSAP in combination with Adobe Animate. Started of with this animation: var tl = new TimelineMax({ paused:true }) tl.to(backgroundtarget, 3, {x:-200, ease: "sine.out"}) function playAnimation() { tl.play(); } function reverseAnimation() { tl.reverse(); } On mouseover and mouseout I'm having the animations played forwards and backwards. From the start however I wish the animation forward to be autoplayed, but with a delay of 2 seconds. If I were to add tl.play(); on the first frame it would already start moving. I know I could use this: tl.to(backgroundtarget, 3, {delay: 2, x:-200, ease: "sine.out"}) But later on on mouseover the tl.play(); would also start 2 seconds later. Also tried this: tl.delay(2); tl.play(); tl.delay(0); Bit that didn't help. Even though delay was being set to 2 in the first line the tl animation still autoplayed directly. How can I use something like tl.delay(2).play(); to have the tl animation run 2 seconds later while still running directly on later mouseovers?
  22. Thanks! I actually started to develop this cause I wanted to make a slideshow just like it in Animate. But I found that process cumbersome. It involved reversing the timeline and such a thing isn't 'easy' to do in Animate. It involved using the 'tick' eventlistener and although I managed to code that, I found the result not as smooth as I wanted it to be and it involved too much code to my taste. So I started thinking about using GSAP inside my Animate document. Then it would be ease to create timelines for that slider which would make the slides go in both directions, forwards and reverse. The result I coded is now exactly how I wanted it. Slides going in both directions and smoothly with a little ease. I updated my code for it a bit so that the slides can be in various positions but using an offset variable. And added a mask to have only the slides individually visible while they are sliding. this.stop(); this.buttonright.addEventListener("click", slideright.bind(this)); this.buttonleft.addEventListener("click", slideleft.bind(this)); var offsetpoint = this.slides.x; function slideright() { tl = new TimelineMax(); var distancepoint = this.slides.x - offsetpoint; var distance = Math.abs(Math.round(distancepoint / 300)); if ((distance >= 0) && (distance < 2)) { tl.to(this.slides, 1, { x: offsetpoint + (-(distance * 300) - 300), ease: Power2.easeOut }) } } function slideleft() { tl = new TimelineMax(); var distancepoint = this.slides.x - offsetpoint; var distance = Math.abs(Math.round(distancepoint / 300)); if ((distance > 0) && (distance <= 2)) { tl.to(this.slides, 1, { x: offsetpoint + (-(distance * 300) + 300), ease: Power2.easeOut }) } } As you can see first the clip's position is stored in 'offsetpoint. The rest is more or less the same. It calculates how far a slide should move left/right and no further than the total amount of slides. You can see the example in below Codepen. Slideshow
  23. Ah, figured it out myself I used a tween to update a variable and used that for my Animate gotoAndStop: this.stop(); var root=this; tl = new TimelineMax(); var keyframe = {frame: 0}; tl.to(keyframe, 1, {frame: 50, ease:Elastic.easeOut, onUpdate:updateHandler}); function updateHandler() { root.gotoAndStop(keyframe.frame); } It first creates the keyframe variable. Then it tweens that and on every update it executes a function which reads that update keyframe variable and uses it to execute Animate's gotoAndStop. Attached the sample files if you're interested. Both the Animate file and the published html file. tester.fla tester.html
  24. 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.
  25. 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?