Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alostdeveloper

Animations aren'ts working

Recommended Posts

I'm having trouble getting my animations to work. I've setup very basic animations to get started with, and nothing happens when I load them. 

gsap002.PNG

gsap001.PNG

Share this post


Link to post
Share on other sites

Have you tried to create said animations in CodePen?

 

Having us see a simplified example with markup and CSS will help us help you.

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Hey alostdeveloper and welcome to the forums.

 

This is likely due to a loading issue of your assets but without seeing a live page it's very hard for us to help you figure out what's going wrong. Have you tried looking at your browser's console? Usually it will tell you if something is not loading or if you have a different error with your code.

  • Like 2

Share this post


Link to post
Share on other sites

Yup, perfectly functional in CodePen (by the way, use the Settings in CodePen to inject <head> stuff)

 

See the Pen dybGVGy by sgorneau (@sgorneau) on CodePen

 

Try loading only TweenMax (remove the <script> calling in TimelineMax.min.js)

  • Like 2

Share this post


Link to post
Share on other sites

I normally wouldn't load it like that, but this is a work project. So I need to figure out why it's not working outside of Codepen.

Share this post


Link to post
Share on other sites

Can you please host a live webpage that we are able to see that can reproduce your issue? Otherwise I'm afraid we can't really be of much more help.

Share this post


Link to post
Share on other sites

I think moving the scripts to the bottom of the page will solve this for you.

:)

 

  • Like 4

Share this post


Link to post
Share on other sites

As pointed out by PointC, the issue is that the script is trying to run before the DOM content that it's looking for is loaded.

 

If you need to keep the script in the head and can't move it to the bottom of the body, you should use the following instead:

 

document.addEventListener("DOMContentLoaded", function(event) { 
  // Your timeline code
});

 

  • Like 3

Share this post


Link to post
Share on other sites

Any ideas why the animation would be working in IE and Safari, but not Chrome?

Share this post


Link to post
Share on other sites
3 hours ago, alostdeveloper said:

Any ideas why the animation would be working in IE and Safari, but not Chrome?

It was working in Chrome when I moved the script on the live page that you had shared previously. So no, no ideas why that may be the case. Maybe you can share a live version of the page again so we can look?

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×