Jump to content
Search Community

Why will my TweenMax project not animate?

jotunheimr20 test
Moderator Tag

Go to solution Solved by Diaco,

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

Hello,

 

I've created a page about the Justice League, because I'm an avid comic lover. 

 

http://codepen.io/wmufunde/pen/NGxewa 

 

I have tested this page on my Chrome browser and none of the animations work at all. However on my codepen, all of my animations save one work. The one that will not work on my codepen is the clip on line 2:


TweenMax.to(".info-block", 2, {clip: "rect(50px 50px 50px 50px)"});


TweenMax.from(".pic", 2, {x: 50});
TweenMax.staggerFrom("#logo", 0.5, {  opacity: 0, y: 100, rotation: 180, scale: 0.5, delay: 0.5}

Does anyone know why my page won't animate? I've linked the GSAP library from the CDN. Have I placed the link in the wrong place, or formatted the link wrong? 

 

Also, does anyone know why the image of the entire Justice League team is so blurry? When I tested this on my Chrome browser, outside of codepen it was perfectly fine. 

 

Any help would be great.

See the Pen NGxewa by wmufunde (@wmufunde) on CodePen

Link to comment
Share on other sites

Hello jotunheimr20,

 

In order for you to use the clip css property you are required to either use the position: absolute or position: fixed property/value along with it.

 

Otherwise CSS clip will not work.

 

Also CSS clip has been deprecated .. in favor of CSS clip-path

 

Taken from W3C spec and MDN:

  • The 'clip' property applies only to absolutely positioned elements.
  • The clip CSS property defines what portion of an element is visible. The clip property applies only to absolutely positioned elements, that is elements with position:absolute or position:fixed.

Resource:

W3C clip: https://drafts.csswg.org/css2/visufx.html#propdef-clip

 

;)

  • Like 2
Link to comment
Share on other sites

In future please produce a test case that is as reduced as possible to make it easier to focus on the issue.

Here is a working example that removes what isn't necessary to illustrate clip working.

http://codepen.io/GreenSock/pen/BozmQG?editors=011

 

From here you should be able to add in the other stuff. 

 

Note that when working in CodePen you don't need the body or head in the html panel.

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