Jump to content
GreenSock

jiggy1965

Members
  • Posts

    50
  • Joined

  • Last visited

Recent Profile Visitors

1,098 profile views

jiggy1965's Achievements

  1. 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
  2. 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?
  3. Like I said, 'stupidly easy' Thanks! https://codepen.io/coder1965/pen/zYzdMvQ
  4. 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
  5. 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...
  6. 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?
  7. Never mind, figured out that I had to add that script 1 frame later than the actual text movie clip on frame 1
  8. 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
  9. That was indeed it! It's working now. Thanks a lot
  10. 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
  11. Tried it, but then the square just keeps on standing still...
  12. 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
  13. 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
  14. 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
  15. 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?
×