Loading gsap inline

[dominium]

I am trying to load the lightest version in greensock to animate element on load. The best way would be timelinelite.min to be put in head inline so the javascript won't render block on,load but only an external tweenmax.min.js is working. I always have a undefined tiemlinemax or lite when I am not using tweenmax.

 

I just want to inline the timelinelite with the animation in the head after i will figure out which plugins to use

 

Thanks

Danny

See the Pen WXZmxO by dominium (@dominium) on CodePen

[Sahil]

You need TweenLite first, it is the lightest with limited features. You can then use other plugins with it. For example, based on your current code you need TweenLite, TimelineLite and CSSPlugin.

 

Here you can read about which plugin does what: https://greensock.com/docs/Plugins

Here if you click on download button, you will see different options like Robust, Lightweight, Customize which can also give you some idea about which plugins to use. https://greensock.com/gsap

 

See the Pen xPXBzv?editors=1000 by Sahil89 (@Sahil89) on CodePen

 

[Jonathan]

Hello @dominium and Welcome to the GreenSock Forum!

 

In order for it to work with just TimelineLite you need the following

 

<script "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenLite.min.js"></script>
<script "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TimelineLite.min.js"></script>
<script "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/CSSPlugin.min.js"></script>

 

So in explanation:

• TweenLite.min.js - main GSAP script that is required since your not using TweenMax.min.js
• TimelineLite.min.js - since you want to use timelines
• CSSPlugin.min.js - since you want to animate CSS properties

You would need all 3 if you don't want to only include TweenMax.min.js.

 

Hope that helps!

 

[dominium]

thank you so much to both. It's always in the details. I was missing the css plugins

 

I will only use a tweenlite since I want the extreme minimum to load.

 

Danny