Jump to content
GreenSock

htwinam

Animating GSAP particles with no jQuery

Go to solution Solved by ZachSaucier,

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

Hi

 

First of all, I'm a total JS noob so apologies if this is a really simple question.

 

I'm trying to animate burning embers, based on this confetti codepen:

See the Pen wBGvgW by MAW (@MAW) on CodePen

 

But it's reliant on jQuery - I need a jQuery-less solution, using only TweenMax, is this possible?

 

Trying to change the code myself () just throws up endless errors and doesn't work so would be massively grateful for any help

 

Thanks

 

 

See the Pen EPOryg by htwinam (@htwinam) on CodePen

Link to comment
Share on other sites

Hi htwinam :),

 

Welcome to the forums.

 

You could make that happen. You'd just need to use the vanilla JavaScript equivalent wherever jQuery is being used in Diaco's pen.

 

This site should be quite helpful to you moving forward with your project:

http://youmightnotneedjquery.com/

 

Hopefully that helps a little bit.

:)

  • Like 4
Link to comment
Share on other sites

  • Solution

By replacing the jQuery selectors, the .width and .height function (with scrollWidth & scrollHeight), and .append function (with createElement and appendChild) I was able to use Diaco's pen to do a non-jQuery version:

See the Pen obQmOM?editors=0010 by Zeaklous (@Zeaklous) on CodePen

 

You can do this in the future by finding each $() part and replacing it with the vanilla JS form as well as the following .function() calls if they are jQuery functions

  • Like 5
Link to comment
Share on other sites

ZachSaucier beat me to it.. :D  pretty much the same thing i came up with:

 

See the Pen mVQvpz by jonathan (@jonathan) on CodePen

 

But I used offsetWidth and offsetHeight instead of jQuery width() and height() .. and then createElement() and appendChild() as usual

 

You could use either for your replacement of jQuery height() and width() depending on your project.

 

This code example shows the difference between offsetHeight vs clientHeight vs scrollHeight

 

http://jsfiddle.net/shibualexis/yVhgM/3/

 

:)

  • Like 5
Link to comment
Share on other sites

oh sure Jonathan and Zach - go the extra mile and make new CodePens. Now my answer just makes me look lazy.  :-D

 

Nice work guys. :)

  • Like 1
Link to comment
Share on other sites

Your not lazy Craig ;)

Link to comment
Share on other sites

Oh you absolute stars, thank you! I'll mark the solution I used as solved, but they're all spot on.

 

Loving this forum :)

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