Jump to content
Search Community

RandomMovementOfDomElementsByUsingGreenSock

PINELABS IT 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

Hi PINELABS IT :)

 

Welcome to the forums.

 

Yep - physics are really cool and a lot of fun. We had a similar question asked not too long ago and Blake provided several examples as well as some great book recommendations to enhance your learning in this area. Please take a look:

 

http://greensock.com/forums/topic/14033-looking-to-learn-more-about-physics/

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

:)

  • Like 1
Link to comment
Share on other sites

Hi Carl,

I have learned all the Front-End looking the Examples of GreenSock only :D . And Thanks for your Reply but can you let me Which plugin would be more efficient for  replicating the above codepen example using GreenSock Or Can it be done by simply using TweenMax object.?

 

Thanks

Link to comment
Share on other sites

I may have misunderstood your initial question. You can definitely simulate that exact demo you provided using CSS with GSAP.

TweenLite.defaultEase = Linear.easeNone;
var tl = new TimelineLite()


tl.to(".box b", 3.05, {x:480, repeat:-1, yoyo:true})
  .to(".box b", 3.4, {y:280, repeat:-1, yoyo:true}, 0)

http://codepen.io/GreenSock/pen/eZLbOv

 

 

However, if you want to accurately mimic physics with objects bouncing off walls you need to:

 

- determine when the object hits a wall

- change the objects's direction appropriately

- decrease the speed using some sort of friction value

 

GSAP does none of the above. Keep in mind that for the most part a TweenLite tween has an absolute start position, end position and duration. To use TweenLite for this you would need to run an onUpdate callback that constantly checks for collision, figures out the angle to bounce, and then creates a new tween with a similar speed in the new direction. Again, lots of logic that GSAP doesn't handle natively. 

 

I'd encourage you to study Blake's example here if you want something like that: http://codepen.io/osublake/pen/vNwRdO/

He uses Pixi.js for the rendering but the logic and calculations will work anywhere.

  • Like 5
Link to comment
Share on other sites

Hi ,

I am working on an animation in which i need to make a rocket fly at a trajectory.I used Bezier plugin to determine the trajectory but the problem I am facing is angle of the rocket in not changing according to the path.Rocket is made by Svg

 

Thanks for any kind of suggestion. 

Link to comment
Share on other sites

Hi,

 

It would really help if you could provide a very simple demo showing your rocket not rotating properly. Did you set autoRotate:true?

 

Since you are a Club GreenSock member you have access to MorphSVG which allows you to use SVG path data in your Bezier tweens and GSAP fully supports animation of SVG elements along a path.  

 

Here is an example using SVG and autoRotate:true:

 

http://codepen.io/GreenSock/pen/7541549039b0b249d09b415e8db7cd92

 

Again, a simple demo will better help us see what the trouble is. Thanks.

  • Like 1
Link to comment
Share on other sites

hi Carl.

Here is the codepen link :-

See the Pen QNJMKL by anon (@anon) on CodePen

this is nearly similar to what I am doing. I tried that MorphSvg's bezier method But the problem remains . You can see in the codepen that I have Set the angle 30 and it remains fixed the rocket is not changing its direction while flying on the bezier path .i want it to follow a trajectory path as if rocket is launched from the bottom center of the screen to the top right corner of the Screen . 

 

Thanks for any suggestion.

Link to comment
Share on other sites

Your path is a diagonal line. You need to use Bezier values for a curve. In the example Carl linked, the balloon is following this path, which is where the values are coming from.

<path id="motionPath" d="M165.36,297.42s127.17,2.86,146-59c21-69,71-104,165-63s165,80,202,9,93-158,93-158" />
  • Like 1
Link to comment
Share on other sites

Hi Blake,

I tried Svg path and it worked but what if i need to put my rocket in a <div> and Svg mothion path as a separate Element . MorphSvg.bezier() function is not working as expected in that case .

 

codepen:- 

See the Pen LNXMRz by anon (@anon) on CodePen

.The motion of the rocket is not smooth along the curve.I hope I am Missing Something.

 

 

MoreOver I have 1 more question can we use physics2d plugin to have velocity and gravity effect with bezier path. ?

 

Thanks for suggesting anything.

 

Thank You 

Carl and Blake  

:P

Link to comment
Share on other sites

Hi Everyone,

 

Can physics2D plugin is useful in replicating a Projectile Motion just as in Physics ?

 

I searched for Example for projectile motion but couldnt find them yet.

 

Here is the codepen for what I am looking :- 

See the Pen mPvjgW by anon (@anon) on CodePen

 

The problem here is that '#logo' object is not changing its angle automatically(as in real life) according to the trajectory while moving 

 

Thanks For Suggestions.

Link to comment
Share on other sites

I think its important to note that a full-fledged physics engine is something very different than a tweening engine like GSAP.

 

In simple terms a physics engine will run code on every tick that applies velocity and friction / resistance to every object and each object will react differently based on its weight, size or mass. One of the benefits of a real physics engine is that you just chuck your objects into a scene and they shoot or blow around "automagically" – forever. You can change things like gravity or friction and everything updates nice and smoothly.

 

A tweening engine like GSAP is VERY different. You build animations for each object with finite durations, start values, end values and eases. Its super efficient as the engine literally does nothing after all tweens end (no need to constantly monitor and apply values like friction, gravity, etc). The big benefit is that you can predict how each tween should render at any time which gives us all the lovely runtime random-access controls like play, seek, reverse, pause, restart, scrubbing etc.

 

Try creating a snowstorm or bubble effect with a physics engine and then tell it to skip ahead 5 minutes into the future and then pause, or try to scrub through it. Very tricky with a physics engine, but easy with GSAP.

Or try using a physics engine to tell 5 objects to move 100px to the left in 0.5-second intervals. Again, difficult with a physics engine but dead-simple with GSAP.

 

I imagine you already understand all this but figure its worth noting so that others can understand why GSAP doesn't have all the bells and whistles of a true physics engine. It basically goes against the design and purpose. 

  • Like 3
Link to comment
Share on other sites

For the record, you could apply the rotation in an onUpdate callback and base it on the previous location. Here's a relatively simplistic way:

http://codepen.io/anon/pen/VagEvd

 

var logo=document.getElementById("logo"),
    prevX = 0,
    prevY = 0,
    RAD2DEG = 180 / Math.PI;

TweenMax.to(logo,4,{physics2D:{velocity:300, angle:-60, gravity:100}, onUpdate:autoRotate});

function autoRotate() {
  var x = logo._gsTransform.x,
      y = logo._gsTransform.y,
      angle = Math.atan2(y - prevY, x - prevX) * RAD2DEG;
  TweenLite.set(logo, {rotation:angle});
  prevX = x;
  prevY = y;
}
  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...

Hi ,

When I make some DOM element draggable like:-

 

function CreateDragg(){
      Draggable.create(".hand", {
bounds:"#bigBox",
edgeResistance:0.65,
type:"x,y", 
onDrag:flameOn
});
}
 
I want to know how can we choose one from multiple events or multiple functions which one to call onDrag.
 
Any Suggestion or example would be of great help.
Thanks
Link to comment
Share on other sites

Hi all,

 

I  am having few questions.My codepen is :-

See the Pen NrWLQx by abhisheklal04 (@abhisheklal04) on CodePen

 

Here MorphSVGPlugin.pathDataToBezier("#motionPath", {align:".character4"});  line is not working as expected.My object is not aligning to the expected path and I am getting error:-   

 MorphSVGPlugin.min_em0tjh.js:13 Uncaught TypeError: l[0].getBBox is not a function.

 

 

Can someone explains me how this align tag works. I think according to the documents of Morph Svg plugin any HTML Dom element should get aligned to the path given by  MorphSVGPlugin.pathDataToBezier function.

 

Thank you

Link to comment
Share on other sites

Sorry for the confusion. The docs were misleading. For the align property you can only pass in an element in the SVG like a <circle> <rect> <g> etc.

To take a DOM element from anywhere on the page and map it onto your SVG path would be a very large undertaking.

 

We have updated the docs to make this more clear.

 

However, you can still tween a DOM element along a bezier path that gets its data from an SVG <path>. So it is totally feasible for you to grab the path data and overlay your character4 on top of the svg in the right spot, or maybe add your character4 artwork as an svg <image> inside your svg.

Link to comment
Share on other sites

  • 3 weeks later...

For anyone interested, I advise you use the "skip to end" button 

http://www.jacquielawson.com/preview.asp?cont=1&hdn=8&pv=3435714&path=83542&pmode=init%C2%A0

 

Pinelabs IT,

 

I think a great place to start would be a CodePen search for fireworks: http://codepen.io/search/pens?q=fireworks&limit=all&type=type-pens

 

Lots of great demos. The most important factor is whether you want to use canvas, DOM elements, or maybe even SVG (Diaco made a really cool trail effect with SVG) http://codepen.io/MAW/pen/EKXNJy

 

Once you figure that out the animation principles for the particles will be pretty similar to what has already been discussed in this thread. 

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