Jump to content
Search Community

Reversing scale and cross-dissolve tweens: AnimateCC + GSAP (cross-post of sorts)

pfash test
Moderator Tag

Go to solution Solved by ohem,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi All,

I'm brand new to GSAP, Animate CC and this forum and I greatly appreciate this learning resource and any help you can offer. I'm posting to this forum because I understand many of you are using GSAP + Animate like I am.

 

I need to play, then reverse tweens using clicks (one click plays tweens and the next reverses them).

Not sure if this is TMI but here's my code that currently does the first part of that. (Don't laugh.)
 

var tl = new TimelineLite();//Create a timeline to control the scaling up and down of the timeline
this.ImageAinstance.addEventListener("click", scaleUpAndSwapTimeline.bind(this));
function scaleUpAndSwapTimeline() {

tl.to(stage.ImageBinstance, .75,{alpha:1});
tl.to([imageAinstance, ImageBinstance], 2, {scale:2});

}

 

 

That code works in my Animate frame script. But I posted to the GSAP forum to get help reversing those tweens upon click.

 

PointC created this helpful codepen (

See the Pen bgyoMg by PointC (@PointC) on CodePen

) that accomplishes exactly what I want to do...but I haven't been able to get his JS code to work in my Animate frame script like the above.

 

One issue: He's using a div to receive the clicks

 

$("#boxWrap").click(function() {
  tl.reversed() ? tl.play() : tl.reverse();
});

 

 

...which makes sense but I don't know how to achieve that when using Animate. Do I just let the stage receive the clicks?

 

Aside from that, PointC's JS code works in a web page but seems not to work in my Animate frame script (due to my lack of knowledge about how to adapt it for Animate).

 

Any insights? I can post my .fla file if needed.

Thanks much!

 

  • Like 1
Link to comment
Share on other sites

Maybe I should simplify the question:

 

Why does:

 

TweenMax.from( $('#homeImg'), .75,{scale:.75, opacity:0,  ease:Quad.easeInOut});

 

...work here:

See the Pen pRXeEX by pfash (@pfash) on CodePen

 

but not in my function (in the frame script) of my fla

posted here:

http://bigbendhc.org/theUplink/codeDemos/My%20MON_HDV-Template/

?

 

Probably I'm making some painfully obvious mistake.

Any help greatly appreciated.

Paul

Link to comment
Share on other sites

I haven't looked at your FLA but it probably has to do with scope, where TweenMax is located in relation to your frame script, where the object is, etc. 

The keyword "this" is your friend in Animate. 

this.myClip_mc.visible = false;

Also, Animate is Canvas, so there's no targeting div's like #homeImg (unless you really want to target a div outside of Animate)

Again, I haven't looked at your FLA though :)

Link to comment
Share on other sites

Thanks for the reply, Davi.

 

TweenMax is called from the html wrapper (generated from a template in Animate). So, in the head of the html wrapper, you'd see:

----------------------------------

<title>$TITLE</title>
<!-- write your code here -->

<!--MY LOAD TWEENMAX CODE LINE-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script  src="http://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>

----------------------------------

 

Also, this is the JS code located in the first frame of the timeline (on the JS layer) in Animate:

----------------------------------

stage = this;
stage.state1_instance.addEventListener("click", scaleUp.bind(this));

function scaleUp() {
TweenMax.from(stage.
state2_instance, .75,{scale: .75, opacity:1,  ease:Quad.easeInOut});
}

----------------------------------

So, I'm expecting that you click on state1_instance and state2_instance scales up. Nope.

Any ideas?

Thanks

Link to comment
Share on other sites

Nice of you to show up here pfash, A reduced case example is always useful so people can see the context in which you are operating.

 

If you can, do send over a super simple .fla that shows what you are trying to achieve. It will make helping you a lot easier. Specially if your FLA only contains the bits that are relevant to the question - not a fully fledged application ;)

Link to comment
Share on other sites

Thanks for your reply, Dipscom.

That FLA posted above is a stripped down demo that only contains content pertaining to my question. Here's the link again:

 

http://bigbendhc.org/theUplink/codeDemos/My%20MON_HDV-Template/
-That sends you to an index page with a link to download the fla. Let me know if you want me to provide that in another way.

 

The simplified question is:

-----------------------------
Why does:

TweenMax.from( $(nameOfImage), .75,{scale:.75, opacity:0,  ease:Quad.easeInOut});

 

...work here in CodePen:

See the Pen pRXeEX by pfash (@pfash) on CodePen

 

...but not in the frame script of that fla linked immediately above?

 

Here is the frame script code:

stage = this;
this.state1_instance.addEventListener("click", scaleUp.bind(this));
function scaleUp() {
TweenMax.from(state2_instance, .75,{scale:.75, opacity:0,  ease:Quad.easeInOut});
}

 

Thanks!

Link to comment
Share on other sites

Hey pfash,
This may not be related to your code but may be related to how you have the JS and HTML setup. (Your code looks fine other than one thing. I do know you should have the keyword "this" or stage in front of state2_instance). Perhaps try using Cory Hudson's GSAP and Animate CC starter kit first, and then implementing your assets and code using those files instead.

https://greensock.com/animatecc-quickstart
 

Link to comment
Share on other sites

Hello pfash, and welcome to the GreenSock forum!

 

Keep in mind that sometimes when passing in your selector for the target, in your case a jQuery collection wrapper $(). You might have to add the below, to the top of your JS before you declare any GSAP custom tweens or timelines:

TweenLite.selector = YOUR_SELECTOR_ENGINE;

// define selector for simple selectors to work with GSAP if you notice jQuery wrapper not working for the tween target
TweenLite.selector = jQuery;

Sometimes you have to specify your selector engine with GSAP

 

https://greensock.com/docs/#/HTML5/GSAP/TweenLite/selector/

 

GSAP does this automatically but sometimes other code can cause issues, so you an try the above. I sometimes have to do the same thing when using GSAP with a CMS system such as Wordpress or Magento.

 

Happy Tweening :)

  • Like 1
Link to comment
Share on other sites

Sorry, Jonathan,

I'm unfamiliar with the language in that article (https://greensock.com/docs/#/HTML5/GSAP/TweenLite/selector/).

 

Is 'YOUR_SELECTOR_ENGINE' a placeholder for some value I need to insert? (If so, how do I know what goes in there?)

 

And do I add that code to the top of my JS code in my FLA's frame script, like this?:

TweenLite.selector = YOUR_SELECTOR_ENGINE;
TweenLite.selector = jQuery;
stage = this;
stage.state1_instance.addEventListener("click", scaleUp.bind(this));
function scaleUp() {
//alert("function was accessed");
TweenMax.from(stage.state2_instance, .75,{scale:.75, opacity:0,  ease:Quad.easeInOut});
}

...or do I add it to my template? (I'm brand new to this.)

 

Thanks much!

Link to comment
Share on other sites

Yes YOUR_SELECTOR_ENGINE is just a placeholder.. you would just need

 

TweenLite.selector = jQuery;

 

See if that helps.. if not try just having your tween target without using the jQuery collection wrapper $()

 

GSAP is not jQuery dependent, so you can pass your selector as a string "" for the tween target.

 

:)

  • Like 2
Link to comment
Share on other sites

OK, Johathan,

This is what I tried in the frame script of my FLA:

TweenLite.selector = jQuery;
stage = this;

stage.state1_instance.addEventListener("click", scaleUp.bind(this));
function scaleUp() {

TweenMax.from(stage.state2_instance, .75,{scale:.75, opacity:0,  ease:Quad.easeInOut});
}

I control > test, click on the state 1 image and state 2 does nothing.

 

You wrote: "See if that helps.. if not try just having your tween target without using the jQuery collection wrapper $()"

I'm not familiar with those terms.

 

How would that look in my above code?

Thanks

Link to comment
Share on other sites

 I tried that. Doesn't work in my FLA.

 

So, in the frame script I put:

canvas.addEventListener("click", click.bind(this));
function click()
{
  TweenMax.from(state2_MC, .75,{scale:.75, opacity:1, ease:Quad.easeInOut});
}

I'm pretty sure I'm making some basic and fundamental mistake that will be easy to identify.

 

I posted my stripped-down FLA (55 kb) here:

http://bigbendhc.org/theUplink/codeDemos/My%20MON_HDV-Template/

 

Can someone please look at it and tell me why the image (state2_MC) doesn't scale up upon click?

Thanks much

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...