Jump to content

Hugh Nivers

Browser Behaves Differently than Code Pen

Recommended Posts

For some reason, Greensock is animating differently in the browser than in Codepen. Here's a video showing the difference: 

Link to comment
Share on other sites

It's hard to tell from a video. If everything else is the same as the CodePen then the only difference would be that you're using local files for TweenLite and the CSS plugin. I'd try loading both from the CDN and load the CSS plugin after TweenLite. 


<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenLite.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/CSSPlugin.min.js'></script>

// or just load TweenMax which includes the CSS plugin.
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js'></script>


CodePen also has an option for exporting the demo. (Check the lower right for the export button.) That way you can compare the version you know is working correctly against your local to spot any differences. 


Hopefully that helps. Happy tweening.


  • Like 6
Link to comment
Share on other sites

15 minutes ago, PointC said:

Didn't know you could export. That helps. Thx. 


Link to comment
Share on other sites

Yeah, I wonder if you're just using a super old version of GSAP locally or something. Tough to troubleshoot blind, though. Feel free to post a reduced test case that we can take a peek at. Happy tweening!

  • Like 2
Link to comment
Share on other sites

Hello @Hugh Nivers and Welcome to the GreenSock Forum!

  • What browser and browser version do you see this difference of behavior?

Also keep in mind that when you run your code in codepen edit mode, that it renders inside an iframe. You would have to view your codepen in debug mode so codepen renders without being in an iframe.


So in your codepen URL you would change /pen/ to /debug/


If you still see the behavior difference than you can at least narrow down your issue isnt that your code is being run through an iframe.  Which can cause render and functional problems sometimes when viewing in codepen.



  • Like 5
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.