[Is jquery required?]

@Visual-Q  @Jonathan Thank you guys for the quick reply ?. That information is much appreciated, Smashing!  @Visual-Q the studio does allow you to order of the scripts, i was tinkering around with these but with no luck. I had been browsing articles in the forum about something similar and noticed a response about jquery and thought this maybe the problem somewhere along the lines. 

 

very grateful for the quick response and the information! Thankyou.

[Is jquery required?]

Hi people,

 

I recently started using GSAP on a personal portfolio project, i am using bootstrap studio and GSAP to design it. I have tinkered around on codepen and got the animations working fine.

 

I knocked up a quick template on the studio and deployed it with a few animations and it work fine, now on deployment via the studio i access the portfolio through the browser (not live preview, its domain) and access that through my phone and laptop and the animations are not working. They work fine when i view it through live reload and on code pen.

 

Do i need to link to the jquery cdn? If i did (which i have) is it required to be in a specific postion in my document?  maybe referred to in the head section? or after the gsap cdn script? or maybe before? Could there be a conflict with bootstrap files in any way?

 

Also, using the tweens when i wrote code to create the animations, obviously boostrap sorts out the file referencing for you. But looking at the code below i put into the file:

 

TweenMax.from("#nav1", .5 , {x: '-=200', y: '+=50'}),
TweenMax.from("#nav2", .5 , {x: '-=200', y: '+=50', delay:0.2}),
TweenMax.from("#nav3", .5 , {x: '-=200', y: '+=50', delay:0.4}),
TweenMax.from("#nav4", .5 , {x: '-=200', y: '+=50', delay:0.6});

TweenMax.from("#icon1", 1, {opacity:0, delay:1,   y:200, rotation:360, scale:1}),
TweenMax.from("#icon2", 1, {opacity:0, delay:1.1, y:200, rotation:360, scale:1}),
TweenMax.from("#icon3", 1, {opacity:0, delay:1.2, y:200, rotation:360, scale:1}),
TweenMax.from("#icon4", 1, {opacity:0, delay:1.3, y:200, rotation:360, scale:1});
 

Do i require a document ready function around these?  Do i need to store the data in variables? I am new to programming, and was hoping to try and figure it out for myself. I have purchased a personal domain and not one from bootstrap studio and wanted to learn to upload it myself but feel its a bit pointless if its not working after been deployed on the bootstrap platform.

 

Any help on this problem, i would be truly grateful for!

 

Thanks in advance, 

 

kind Regards

 

Adam

[not working with $(document).ready()]

On 12/14/2013 at 3:29 AM, Carl said:

Great! No worries, its easy to make that mistake, especially when so many libraries depend on jQuery.

 

One of the great things about GSAP is that it has no dependencies on jQuery or any other library. You can run GSAP super-lean.

 

On the other hand, jQuery is an amazing selector engine and we strongly recommend that you do use it, as it makes so many things with JavaScript not only easy but reliable in many browsers.

 

If jQuery is loaded GSAP will automatically default to using it as the selector engine so you can pass in any jQuery selector string directly to a tween:

TweenLite.to("#footer .copyright", 0.5, {left:50}) // tween all elements inside #footer with a class of .copyright

finally. Its taken me 3 days! Thankyou guys