Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

jiggy1965

Members
  • Posts

    48
  • Joined

  • Last visited

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