Jump to content
GreenSock

jimyu0414

TimelineLite Not working in Chrome, Need for help !

Go to solution Solved by Dipscom,

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

I write a mask animation which is working fine in firefox and afari. However, there is no animation effects in Chrome, ( the code is actually working ) I couldn't figure out why. 

See the Pen ezJeaj by jimyu0414 (@jimyu0414) on CodePen

Link to comment
Share on other sites

  • Solution

Hi jimyu0414,

 

Welcome to the forums! 

 

You said it yourself: "the code is actually working" - So, TimelineLite is working in Chrome. What seems to be wrong is your setup.

 

Elements inside of the <defs> tag are not part of the DOM tree, they don't get rendered into view so, animating them is not advisable. There are ways, of course, but I don't think it is applicable for what you are trying to achieve.

 

I have forked your pen and made a couple of changes, I hope this is what you were looking for.

 

See the Pen dXdZNq?editors=1010 by dipscom (@dipscom) on CodePen

 

If you want to animate something inside of a mask, make sure the mask is on its own element - in this case the <g> I created as a wrapper for your <use> element. Then, animate whatever it is that you need inside that <g>.

 

Hope this helps.

  • Like 7
Link to comment
Share on other sites

Also, I think you are overcomplicating things in your JS logic so, I will comment out your original code and replace with something simpler that achieves the same effect.

Link to comment
Share on other sites

I have a simple animation in my Meteor app based on TimelineLite which works as intended in Firefox, but doesn't work at all in Chromium.

 

Kindly point out what  I am going wrong.

 

My HTML code:

 

<template name="testAnimation">

    <a href="#"> 
       <div align= "right" class="circleBase1 subMenu1" id="testAnimation2"  > </div>
   </a>
</template>
 
 
 
My JavaScript Code:
 
Template.testAnimation.events({ 
 
"click #testAnimation2": function() {
     var myMenuAnimation = new TimelineLite();
     myMenuAnimation.to($("#testAnimation2"), 0.5, {css:{left:30, bottom:20,}, ease: Power4.easeOut} );
 }
 
});  
 
 
 
 
My CSS code:
 
.circleBase1{
    position: fixed;
    background-image:url(../images/searchicon.png);
    border-radius: 60%;
    display: inline-block;
    float: right;
    right: 30px;
    bottom: 20px;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}
 
.subMenu1 {
    box-shadow: 5px 1px 10px #808080;  
    z-index: 1999;
    right:30px;
    bottom: 20px;        
}
 
Thanks in advance

 

Link to comment
Share on other sites

Hello SirBT,

 

Can you please provide a codepen demo so this way we can test your code live?

 

 

Thanks

  • Like 1
Link to comment
Share on other sites

hi sirBT,

 

Welcome to the forums,

 

When you can provide the demo that Jonathan requested please start a new topic as it isn't fair to Jimyu to have an unrelated support request mixed with his.

 

Thanks for understanding.

  • Like 4
Link to comment
Share on other sites

Hi jimyu0414,

 

Welcome to the forums! 

 

You said it yourself: "the code is actually working" - So, TimelineLite is working in Chrome. What seems to be wrong is your setup.

 

Elements inside of the <defs> tag are not part of the DOM tree, they don't get rendered into view so, animating them is not advisable. There are ways, of course, but I don't think it is applicable for what you are trying to achieve.

 

I have forked your pen and made a couple of changes, I hope this is what you were looking for.

 

See the Pen dXdZNq?editors=1010 by dipscom (@dipscom) on CodePen

 

If you want to animate something inside of a mask, make sure the mask is on its own element - in this case the <g> I created as a wrapper for your <use> element. Then, animate whatever it is that you need inside that <g>.

 

Hope this helps.

Hi Dipscom

 

Thank you for the comments and demo, it's a great lesson.

Link to comment
Share on other sites

Anytime Jimyu. Whenever you need a hand, we're here. :)

  • Like 2
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.
×