icraig6666

November 12, 2019

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!

See the Pen KKKxVEY by fondella (@fondella) on CodePen

November 11, 2019

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!

See the Pen KKKxVEY by fondella (@fondella) on CodePen

November 8, 2019

Thanks. most helpful. Much appreciated..?

November 8, 2019

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?

November 7, 2019

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.

March 29, 2019

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);

May 9, 2016

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

April 20, 2016

Thanks for your replies! Much appreciated..

April 19, 2016

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:

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...!

September 21, 2014

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

September 20, 2014

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

September 18, 2014

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();

Notifications

Messages

icraig6666

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by icraig6666

Simple on/off button hover state in banner

simple GSAP button rollover in Animate CC

Button Hover state using GSAP and Adobe Animate CC

Button Hover state using GSAP and Adobe Animate CC

Button Hover state using GSAP and Adobe Animate CC

Play animation then reverse animation

animating out from a center point

SVG animations

SVG animations

Simultaneous tweens and position resets

Simultaneous tweens and position resets

Simultaneous tweens and position resets