Jump to content
Search Community

The Greensock company logo animation

ThePixelPixie 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

This is my first time trying to use Tween of any form (Max or Lite). I really like the company logo animation on the Greensock pages and thought I'd try to figure out how it was done. So far I'm not having any luck. Could someone help me here? I'm sure I'm missing some sort of key component to getting this going. I copied their js file for the logos, copied the html and the matching css...called the CDN...I'm just not sure what I'm missing here.

 

All help appreciated!

See the Pen OMbQzE by ThePixelPixie (@ThePixelPixie) on CodePen

Link to comment
Share on other sites

Hi ThePixelPixie :),

 

Welcome to the forums - you're gonna love GreenSock.

 

The console is showing that your CodePen is just missing the jQuery files to make the magic happen.

 

Click the little gear icon on the JS panel and you can add jQuery via the CodePen interface. You can also add TweeMax in there as well instead of in your HTML. You'd need:

//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js
//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

That should get you working. Happy tweening. :)

  • Like 1
Link to comment
Share on other sites

Well that certainly has solved *something*, at least in CodePen.  I already have jquery and Tween Max loaded on the WordPress site (and yes, I don know how to register and enqueue correctly).  But in CodePen right now, only 2 logos are appearing and they aren't changing at all :(  I do note an error in Console on my website that says "Can't find variable: TweenMax" in the javascript (which is in the js section of the CodePen).

Link to comment
Share on other sites

I have no idea. Truly, I just copied the company-logos.js script from the Greensock footer. The only thing I modified was the number of columns down from 5 to 4 and the corresponding numbers as well.  It's all inside the CodePen. Does nothing stand out for you there? I'm sorry. I'm sure this should be very simple for me to figure out, but honestly I'm at maximum stress levels getting ready to leave on a business trip and my brain is just going....GGAAAAAAACKKKK

Link to comment
Share on other sites

That error is generated by CodePen when it thinks there is an infinite loop. Yup. They secretly inject code into your for loops. Here's a screen shot of some code I was working on that they messed up...

ndEFZIi.png

 

That can explain the error. But why does it think there is an infinite loop? Because the updateLogo function seems to be getting called non-stop, at least initially. You should hunt down what's causing that. It might be related to the number of logos.

 

  • Like 3
Link to comment
Share on other sites

I think this is happening because there are a number of differences between the logo animation this website has and the codepen version @ThePixelPixie is having, mainly:

  • The number of `companies` elements in the website is 5 but the codepen version @ThePixelPixie has is 4.
  • The number of `company` elements in each of the `companies` elements in website is 15 but in codepen it is only 2 (and in one case, 3).
  • The code in JS is mainly catering for the numbers of `companies` (and `company` element in each of those `companies`) elements and is tightly bound to that.
  • Just to try it out, make duplicates of `company` element inside `companies` element to have them exactly 15. And also make sure that the number of `companies` elements is exactly 5 by duplicating as well.
  • This should make the code work fine.
  • However, to make it flexible / scalable and adopt to your needs (i.e. 4 `companies` elements and perhaps 2 `company` element in each of those), there is some work that needs to be done in the code.

See the Pen RrodWJ?editors=001 by tah_med (@tah_med) on CodePen

is forked version of the pen with these updates. Also, you don't need to include TweenMax via <script> tag if you are already loading it via the Settings of codepen along-side jQuery.

 

Hope this helps in some way.

  • Like 6
Link to comment
Share on other sites

Wow, that's a lot of DOM elements.

 

I was trying to think of a better way to do this, but then I saw Angular 1.5 is about to be released which has a new animation swap feature, so I wanted to try that out. Sorry for hijacking your thread, but Angular animations are awesome.

 

The new swap animation directive is pretty freaking awesome. It's going to make creating image carousels/sliders a breeze. Using it is very easy. Just set the property you want to trigger the swap and Angular will clone the element and fire an enter and leave animation.

<img class="swap-animation" 
     ng-animate-swap="logo" 
     ng-src="https://yoursite.com/images/{{logo}}.png" />

Simple example...

See the Pen 2d6445c25aedbfd4cf94834ccea925a5?editors=001 by osublake (@osublake) on CodePen

 

And here's a version using the new components feature where I do some shuffling.

See the Pen ?editors=001 by osublake (@osublake) on CodePen

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