Jump to content
GreenSock

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

Why will my TweenMax project not animate?

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. 

 

https://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.

Share this post


Link to post
Share on other sites

Thanks, Diaco. That's fixed one of my problems but the animation on ".info-block" still doesn't work:

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

Do you know why this is?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Even if I specify the position of this div as absolute or fixed, the clip animation doesn't work:

 

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

 

Do you have any idea of what the problem could be?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Thank you Diaco and Carl. Your solutions have both solved my problem but the forum can only let me choose one answer as "the best" answer even though I actually had two problems.

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×