Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Adam Wright

Is jquery required?

Recommended Posts

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

Link to comment
Share on other sites

You don't need jQuery for gsap and your script isn't using it as presented.

 

jQuery is required for some bootstrap elements however - see link, if you're using it with gsap it would have to be loaded before gsap.

 

https://www.w3schools.com/bootstrap/bootstrap_get_started.asp

 

To wait for assets to load before starting animation you can wrap them in a load event.

 

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

 

Some info on jQuery document ready and jquery load:

 

https://coderwall.com/p/_jothq/jquery-when-to-use-document-ready-and-when-window-load

 

I don't use bootstrap studio but it look like the interface allows you to import and set the order of your js scripts:

 

https://bootstrapstudio.io/tutorials/changing-file-include-order-js

 

 

 

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

Hello @Adam Wright and Welcome to the GreenSock Forum!

 

Here is a link to the TweenMax from() Docs: https://greensock.com/docs/TweenMax/static.from()

 

So the from() method has 3 parameters.. specifically the target parameter:

 

TweenMax.from( target, duration, vars ) 

 

The target parameter

  • target: Object
    Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll().

So just like @Visual-Q advised jQuery is not required.  But keep in mind if using the load event you want to stay away from the onload event and use addEventListener("load") instead, since the window.onload event can wipe out previously binded load events on the window object.

 

Here is a quick way to make sure you only run your GSAP code after the window is fully loaded and the DOM is fully ready. Below you will see that I first make sure the DOM is ready, and then check if the window is loaded. This makes sure that the HTML or SVG markup is fully ready and that the window is checked within that DOM ready event handler. That is a great cross browser solution.

 

The reason being is that sometimes the window event can fire before your DOM is ready or vice versa. That happens due to slow networks and connectivity. This makes sure that the window event fires, even if it it fires before or after the DOM is ready. So if the window load fires after the DOM ready.. it will fire as expected. If the window fires before the DOM is ready, it will wait and fire immediately after the DOM ready event. So this way you cover your bases ;)

 

The Vanilla JS way:

 

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  
  // wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded
  window.addEventListener("load", function() {
    
    // GSAP custom code goes here
    
  }, false);
  
  
});

 

The jQuery way:

 

// wait until DOM is ready
$(document).ready(function() {
  
  // wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded
  $(window).bind("load", function() {
    
    // GSAP custom code goes here
    
  });
  
  
});

 

Happy Tweening :)

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

@Jonathan I took your load script for a spin on a wp site I'm doing and I found the outer DOMContentLoaded listener appears problematic in safari,  seems fine in Chrome. it fails intermittently on interior pages, then works on a refresh, then fails again. 

 

Just thought I'd pass it along along.

 

Wondering if it could be because the event already fired before the listener is even added mentioned here: 

 

https://stackoverflow.com/questions/39993676/code-inside-domcontentloaded-event-not-working

 

 

 

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  
  // wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded
  window.addEventListener("load", function() {
    
    // GSAP custom code goes here
    
  }, false);
  
  
});

 

  • Like 1
Link to comment
Share on other sites

1 hour ago, Visual-Q said:

Wondering if it could be because the event already fired before the listener is even added mentioned here: 

 

It might not fire if everything has been cached. 

 

if (document.readyState === "interactive" || document.readyState === "complete") {
  onReady();
} else {
  window.addEventListener("DOMContentLoaded", onReady);
}

function onReady() {
  // ready code
}

 

 

But why are you listening for that event? I'm not saying it's a bad idea, but it might not be necessary. The DOMContentLoaded event is like jQuery's ready method, which is needed because some people put their scripts inside the <head> tag.

 

I only listen for the window load event when I need to make sure my images are loaded, like when I'm working with canvas.

 

  • Like 4
Link to comment
Share on other sites

2 hours ago, OSUblake said:

I only listen for the window load event when I need to make sure my images are loaded, like when I'm working with canvas.

 

I typically did it inside just a load event in that past which always seemed to work fine but I was trying it based on Jonathans rational:

 

On 6/12/2019 at 12:31 PM, Jonathan said:

The reason being is that sometimes the window event can fire before your DOM is ready or vice versa. That happens due to slow networks and connectivity. This makes sure that the window event fires, even if it it fires before or after the DOM is ready. So if the window load fires after the DOM ready.. it will fire as expected. If the window fires before the DOM is ready, it will wait and fire immediately after the DOM ready event. So this way you cover your bases ;)

 

 

Is seems problematic though in my case so I'll just stick with load event on its own. 

 

 

Link to comment
Share on other sites

I really haven't looked into this before, but this Stack Overflow answer says the firing order will be:

  1. DOMContentLoaded event listeners of window in the capture phase
  2. DOMContentLoaded event listeners of document
  3. DOMContentLoaded event listeners of window in the bubble phase
  4. load event listeners (including onload event handler) of window

https://stackoverflow.com/a/38517365/2760155

 

And part of the spec:

https://html.spec.whatwg.org/multipage/parsing.html#the-end

 

 

  • Like 2
Link to comment
Share on other sites

Hi @Visual-Q
 

On 7/12/2019 at 10:57 PM, Visual-Q said:

Wondering if it could be because the event already fired before the listener is even added mentioned here: 

 

Yep.. that right. You had that issue in Safari because if the DOMContentLoaded already fired Safari will not fire its callback.

 

Safari doesn't follow the spec in relation to DOMContentLoaded. Sometimes you have to use a setTimeout() due to how Safari logs the function within its callback.

 

In my own tests I have seen the DOMContentLoaded fire either both before and after window load event. That is why I place the window load event within the ready event so no matter what the window event will fire my callback after the DOM is ready.

 

This is because network connectivity can cause the window to fire before or after the DOM is ready. So that makes sure i have control when my custom code runs. 

 

But If your having issues with DOMContentLoaded.. the spec also allows you to bind DOMContentLoaded to the window instead, or you can check the readyState complete, like @OSUblake showed above.

 

:)

  • Like 2
Link to comment
Share on other sites

Also keep in mind @Visual-Q that since your already using WordPress, it comes preloaded with jQuery.

 

Then you could also use the jQuery ready() event instead of DOMContentLoaded to wrap your window load event.

 

Since the jQuery ready() event already uses readyState, to help get around that Safari DOMContentLoaded bug.

 

:)

  • Like 3
Link to comment
Share on other sites

4 hours ago, Jonathan said:

Since the jQuery ready() event already uses readyState, to help get around that Safari DOMContentLoaded bug.

 

 

Yeah that makes sense otherwise the ubiquitous document.ready would fail all the time too. Thanks for the info @Jonathan

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