Jump to content
Search Community

Browser Behaves Differently than Code Pen

Hugh Nivers test
Moderator Tag

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

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

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.
×
×
  • Create New...