icraig6666

Hi, Currently I have a 300x600 banner with two images fading from one to the other. Beneath these images I need the cta to have a simple on/off hover state. I have an svg as a symbol called cta_hover that is currently on alpha:0 and I need this to be alpha:1 on "mouseenter" and alpha:0 on "mouseleave". Should I write the GSAP code for this in the actions panel/timeline or should I write in the published JS file? Thanks in advance for any replies!

Hi, Currently I have a 300x600 banner with two images fading from one to the other. Beneath these images I need the cta to have a simple on/off hover state. I have an svg symbol called cta_hover that is currently on alpha:0 and I need this to be alpha:1 on "mouseenter" and alpha:0 on "mouseleave". Should I write the GSAP code for this in the actions panel/timeline or should I write in the published JS file? Thanks in advance for any replies!

Thanks. most helpful. Much appreciated..?

Thanks for posting this. So "expand" and "contract" are frame labels that will play a tween sequence in the main timeline. I have an imported SVG as my cta so will have to target the fill color of the rectangle. Do you have a Codepen example?

Hi All, My client has requested a simple rollover/hover state color change for a button in a HTML5 banner. I use Adobe Animate CC to load in SVG assets and then code GSAP animations in the actions panel. What's the best way to implement this? Thanks in advance for advice and/or examples about how to achieve this.

I'm playing a sequence of images which I then want to reverse. This needs then to loop twice. I have the loop JS, but the documentation for .reverse(); doesn't initiate the reverse at the right time, it reverses it right at the beginning. If anyone could point out what I'm doing wrong that be great. Thanks!... Code here: tl.from(this.image_1, 3,{ alpha:1, ease: Power2.easeInOut }) .to(this.image_1, 1, { alpha:0, ease: Power2.easeInOut },'image_1') .to(this.image_2, 1, { alpha:1, ease: Power2.easeInOut },'image_1-=2') .to(this.image_2, 1, { alpha:0, ease: Power2.easeInOut },'image_2') .to(this.image_3, 1.5, { alpha:1, ease: Power2.easeInOut },'image_2-=2.5') .to(this.image_3, 1, { alpha:0, ease: Power2.easeInOut },'image_3') .to(this.image_4, 1.5, { alpha:1, ease: Power2.easeInOut },'image_3-=3') .to(this.image_4, 1, { alpha:0, ease: Power2.easeInOut },'image_4') .to(this.image_5, 1.5, { alpha:1, ease: Power2.easeInOut },'image_4-=3.5') .to(this.image_5, 1, { alpha:0, ease: Power2.easeInOut },'image_5') .to(this.image_6, 1.5, { alpha:1, ease: Power2.easeInOut },'image_5-=4') .to(this.image_6, 1, { alpha: 0, ease: Power2.easeInOut },'image_6') .to(this.image_7, 1.5, { alpha: 1, ease: Power2.easeInOut },'image_6-=4.5') .to(this.image_7, 1, { alpha: 0, ease: Power2.easeInOut },'image_7') .to(this.image_6, 1.5, { alpha:1, ease: Power2.easeInOut },'image_7-=5') tl.reverse(0);

I have a diagram of three small circles that all sit on the outline of much larger cirlce, much like an atomic diagram. I need to animate (fade in and move) these smaller circles out from the center point of this larger circle. I haven't yet found a way to achieve this....anyone out there that can help? Thanks in anticipation

Thanks for your replies! Much appreciated..

Hi Everyone, Just dipping my toe into DrawSVG and I'm picking up on a project a previous developer has worked on. Just got a couple of questions which I hope someone can help with. In the html there is a long string of numbers, for example: <path style="fill:#FFFFFF;" d="M-357.8,745.5v3.8c0,2,4.8,4.1,11.3,4.1s11.3-2.2,11.3-4.1v-3.8c-2.3,1.7-6.4,2.8-11.3,2.8 S-355.5,747.2-357.8,745.5z"/> Where does this get generated from? What is it doing? All the paths in the animation have these strings - some are very long. Any help/clarification very gratefully recieved...!

Thanks so much Carl, this'll really help me to get familiar with the logic.

Thanks Carl, I've zipped it up for you to take a look at. TEST copy.zip It's pretty basic stuff - trying to get two objects to tween at the same time, both scaling down slightly as though the camera is zooming out, the car object scales down slightly less than the bg. It works fine on the first loop but doesn't reset the scale of both objects for subsequent loops. No scaling animation happens in the 2nd and 3rd loop, so its not resetting correctly. The text and button work fine on all the loops. Thanks very much for yr help in getting me to understand some Greensock animation basics! Ian

Hi, I have a simple movie that has two tweens happening (two photos going down in scale slightly at the same time, var car and var photo; a background object and a foreground object). This works fine on the first loop, but nothing happens on the second loop, and the third loop the foreground object ("car") has been scaled twice, so appears too small, and again no animation happens. There are some 'position reset' issues here that I don't understand, most of what I try in the 'reset to start position' in the code makes things worse. Any help gratefully recieved. Thanks.. import com.greensock.* import com.greensock.easing.*; import flash.display.MovieClip; //import flashx.textLayout.operations.MoveChildrenOperation; var text1:MovieClip; var photo:MovieClip; var finalText:MovieClip; var blackMask:MovieClip; var button:MovieClip; var price_text:MovieClip; var car:MovieClip; // STARTING STATES text1.alpha = 0; finalText.alpha = 0; price_text.alpha = 0; button.alpha = 0; button.x = 370; blackMask.alpha = 1; photo.scaleX = 1; photo.scaleY = 1; car.scaleX = 1; car.scaleY = 1; //ANIMATE SEQUENCE var max_loops:Number = 3; var loop_count:Number = 1 var TL:TimelineLite = new TimelineLite({onComplete:countUp}); function playOnce():void { TL.to(photo, .2, {scaleX:"+=0.1",scaleY:"+=0.1"}); //FADE FINAL TEXT IN TL.to(blackMask, .4, {alpha:0}); TL.to(photo, 3, {scaleX:"-.09",scaleY:"-.09"},1); TL.to(car, 2, {scaleX:"-.1",scaleY:"-.1"},1); TL.to(button, 1.5, {alpha:1}, "-=0.1"); TL.to(text1, 1.5, {alpha:1}, "-=0.1"); TL.to(finalText, 1.5, {alpha:1}, "-=0.1"); TL.to(price_text, 1.5, {alpha:1}, "-=0.1"); TL.to(button, .5, {x:255}, "+=0.5"); //WRAP 'LOOP RESET' TWEENS IN CONDITIONAL, last run ends at FINAL text if (loop_count<max_loops) { //FADE FINAL TEXT OUT TL.add([new TweenLite(blackMask, 1, {alpha:1}), new TweenLite(button, 0.3, {alpha:0}), new TweenLite(finalText, 0.3, {alpha:0}), new TweenLite(text1, 0.3, {alpha:0}), new TweenLite(price_text, 0.3, {alpha:0}), new TweenLite(button, 3, {x:370}), ], "+=3"); //RETURN TO START POS new TweenLite(photo, 0.25, {scaleX:"0.1",scaleY:"0.1"}); new TweenLite(car, 0.25, {scaleX:".1",scaleY:".1"}); new TweenLite(button, 0.3, {alpha:0}); new TweenLite(button, 0.25, {x:370}); new TweenLite(car, 0.25, {scaleX:"0.1",scaleY:".1"}), TL.play(); } } function countUp():void { loop_count++; init(); } function init():void { if (loop_count<=max_loops) { trace("played "+loop_count+" times"); playOnce(); } } init();