Jump to content
GreenSock

AdObeOne

Reverse opacity does not work in Edge Animate

Recommended Posts

Hello,

 

I'm trying to make a simple animation of a word cloud. About a dozen words on which you can click. The clicked word then moves to the top left corner and text about that topic moves into view, fading in, from an off stage position. All the other words in the word cloud fade out.

 

All the moving works fine. The change of opacity from the initial value to the new value works ok as well. But the reverse tween of the opacity value does not work.

 

Here is the code for the click handler of one of the word cloud words called "LinkedIn".

 

 

var eKlantBeleving = sym.$("KlantBeleving");

var eCommunityManager = sym.$("CommunityManager");

var eContentAgenda = sym.$("ContentAgenda");

var eInternetMonitoring = sym.$("InternetMonitoring");

var eMailChimp = sym.$("MailChimp");

var eTooling = sym.$("Tooling");

var eLinkedIn = sym.$("LinkedIn");

var ePinterest = sym.$("Pinterest");

var eWebcare = sym.$("Webcare");

var eTwitter = sym.$("Twitter");

var eFacebook = sym.$("Facebook");

var eLinkedInTekst = sym.$("LinkedInTekst");

 

var tLinkedIn = TweenMax.to(eLinkedIn, 0.5, {css:{x:-124, y:-104}, reversed:false});

var tRest = TweenMax.to([eKlantBeleving, eCommunityManager, eContentAgenda, eInternetMonitoring, eMailChimp, eTooling, ePinterest, eWebcare, eTwitter, eFacebook], 0.5, {css:{opacity:0}});

var tLinkedInTekst = TweenMax.to(eLinkedInTekst, 0.5, {css:{y:-390, opacity:1}});

 

$(eLinkedIn).on("click", function() {

  if (tLinkedIn.reversed()) {

    tLinkedIn.play();

    tRest.play();

    tLinkedInTekst.play();

  } else {

    tLinkedIn.reverse();

    tRest.reverse();

    tLinkedInTekst.reverse();

  };

});

 
What am I doing wrong?
 
Thanks in advance for your help.
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Usually we don't give support for Edge issues, as we try to keep focus on GSAP only.

 

In this case, at least what I can see in your code, there's nothing that jumps seems wrong or that could be causing the issue. You said that the opacity tween reverse doesn't work; the other tweens reverse does work?.

 

Another alternative is add all the tweens to a timeline and play/reverse the timeline, is more concise and if the amount of instances increases you just add them to the timeline and the control is as easy:

var masterTL = new TimelineLite({paused:true}).reversed(false),
    tLinkedIn = TweenMax.to(eLinkedIn, 0.5, {css:{x:-124, y:-104}}),
    tRest = TweenMax.to([eKlantBeleving, eCommunityManager, eContentAgenda, eInternetMonitoring, eMailChimp, eTooling, ePinterest, eWebcare, eTwitter, eFacebook], 0.5, {css:{opacity:0}}),
    tLinkedInTekst = TweenMax.to(eLinkedInTekst, 0.5, {css:{y:-390, opacity:1}});

masterTl.add([tLinkedIn,tRest,tLinkedInTekst]);

$(eLinkedin).on("click", function()
{
  masterTl.reversed() ? masterTl.play() ; masterTl.reverse();
});

If your code keeps presenting the same issue, I'd suggest you to ask in the Edge support forums. Also from time to time Chris Gannon takes a peek around the forums and answers question regarding Edge, so hopefully He'd jump into this one as soon as possible.

 

Rodrigo.

Link to comment
Share on other sites

I really don't see anything in your code that would be specific to causing a problem in Edge. The best route is to re-create this demo without Edge using basic css, html, jQuery and GSAP.

 

You could probably whip up a CodePen demo with just 2 or 3 elements. 

 

If it still doesn't work, than Edge is off the hook and we can very easily help assess the problem

 

Read this to see how to get started with CodePen: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

Link to comment
Share on other sites

I would like to get rid of Edge, but it helps visually. I was very enthusiastic about Edge at first. For simple animations, it is a great visual tool. But as animations become more complex, or if you want to combine more than one animation it becomes cumbersome.

 

I will try to create the word cloud animation without Edge in DreamWeaver or CodePen. But as I am new to Greensock, I have yet a lot to learn. But I think Greensock is the way forward for me.

 

Rodrigo and Carl, thanks for your response.

 

Ad

Link to comment
Share on other sites

AdObeOne, I'd be happy to take a peek at a simple Edge file (well, set of files I guess) if you wanted to zip it and post here. We don't mean to sound anti-Edge at all, but it's always easier to diagnose when other tools are taken out of the mix, that's all. 

 

Visual tools like Edge can be a HUGE help. We get it. In fact, I'd love to get an "export to GSAP" feature into Edge at some point. But yes, I think your instinct is right about the fact that visual tools can only take you so far, and designers that can code will always be able to do a lot more interesting/complex stuff than folks who are locked to a visual timeline. Ideally, a tool would allow you to do both. 

 

By the way, you don't need to wrap stuff in css:{} if you don't want to. It's absolutely fine to do the wrapping, but since it was so common for people to animate CSS properties, we added a feature a while back that will automatically pull that stuff out internally and add the css:{} wrapper for you so that your code can be more concise. 

  • Like 2
Link to comment
Share on other sites

Jack, thank you for your response. I like to use and learn as little number of tools as possible. So I'm kind of glad that I can stop using Edge and start using a much more powerful tool: Greensock.

 

I read about not having to use the css selector, but it also said there was a small speed price to pay for the convenience. So I don't mind being explicit.

 

I attempted the same word cloud animation yesterday in DreamWeaver with Greensock, but I can't get the referenced tween to work. I made a new post about it. I'm going to add a zipped DreamWeaver project file to that post momentarily, as Carl suggested.

Link to comment
Share on other sites

  • 4 weeks later...

Was the opacity of eLinkedInTekst ever 0?

 

If not tLinkedInTekst won't ever know that a 'reverse()' call means that eLinkedInTekst's opacity should return to 0.

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