Jump to content
GreenSock

jiggy1965

Members
  • Posts

    50
  • Joined

  • Last visited

Everything posted by jiggy1965

  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?
  16. 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
  17. 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
  18. 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.
  19. 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?
  20. 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
  21. 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
  22. 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?
  23. 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
  24. 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");
  25. 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?
×