“GSAP, the rolls-royce of JS animation frameworks. Still going strong!”

June 1, 2018

There are multiple issues with your svg and demo,

1. You need drawSVG plugin to draw paths, you were also using really old version of TweenMax. DrawSVG plugin is part of club membership but on codepen you can use drawSVG plugin for free to practice and learn.

2. You don't need to manually use document.querySelector, GSAP uses it internally so you can just pass your query string.

3. DrawSVG plugin only draws paths, some of your paths seem to have no stroke and only has fill so it appears they are not being drawn.

4. Your svg elements seems to be using inline transforms which can cause issues in some cases, please take a look at SVG gotchas thread.

Also, manually chaining each path might make it hard to make changes in future, you can use stagger tweens to achieve same effects.

See the Pen ERjOKB?editors=0110 by Sahil89 (@Sahil89) on CodePen

Also take a look at couple of great posts on how to do handwriting effect by @PointC

May 31, 2018

Ya they have different speed so it creates illusion of depth. Please go through the threads we mentioned, you would be able to modify them to achieve same effect.

May 31, 2018

I assume you are referring to parallax scrolling on this page https://art4globalgoals.com/en/project

Take a look at couple of demos in following threads,

Also take a look at following article that discusses how different scrolling methods affect performance,

https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#lvzozB8m1fZOWgTt.97

May 31, 2018

Ya we rarely get such posts, probably 2-3 every month. But it might keep more people around forum. I would go with 'Jobs & Freelance'. While you are at it, consider making sub-forum for all NPM related questions.

I would have also requested area51 but all of our moderators have vanished. seriously, where is everybody?

May 31, 2018

A tween or timeline can only have one parent.

The only solution I can think of is to use functions to create your timelines so you can create multiple copies, but be careful while using from tweens.

May 31, 2018

It is really hard to tell you how you can create entire website. As you mentioned in other thread that you are beginner, I would recommend spending some time to get familiar with basics. You can start by visiting 'Getting started with GSAP' page https://greensock.com/get-started-js

Take a look at following thread that discuss similar mouse effects,

The parallax effect,

The transitions, there is a lot going on in that site. It uses canvas for the background transition effects. My guess is it uses PIXI js. Which is pretty advanced stuff. You can visit PIXI js website to learn more about it.

May 31, 2018

You can include GSAP to your html site just like how you would any other JavaScript file.

Create a js folder at the root and place your javascript files in it, and reference them in HTML as following snippet.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="default.css" />    
</head>

<body>
    <div id="container">
        <div class="box one"></div>
    </div>
	<script src="js/TweenMax.js"></script>
    <script src="js/Draggable.js"></script>
    <script src="js/ThrowPropsPlugin.js"></script>
    <script src="js/default.js"></script>
</body>

</html>

Because they are being included in the body tag you don't need to use any event to check if page has loaded or DOM is ready to be manipulated. Any code you write in default.js will run when page loads.

https://developer.mozilla.org/zh-TW/docs/Web/Events/DOMContentLoaded

http://learn.jquery.com/using-jquery-core/document-ready/

May 30, 2018

Your logic was correct, but you were trying to animate element with id 'shape' but your svg has element with id 'from'.

See the Pen QxwGYx?editors=1010 by Sahil89 (@Sahil89) on CodePen

May 30, 2018

Using invalidate method will cause GSAP to re-record the values.

https://greensock.com/docs/TweenLite/invalidate()

May 30, 2018

I thought you figured it out.

Here is fork of Blake's previous demo. Here I am calculating two lengths from where scan should start and end, it is being determined by how much your mouse has traveled. It works fine on curves and edges, e~~xcept on sharp edges where angle is too small.~~ Actually it works just fine if you set your goals realistically.

If you want more control then you might want to go through Blake's second demo.

Again to understand how everything works and how you can make changes as per your requirements, you will need to get through the fundamentals of how paths work and the code we have posted.

See the Pen oygXaj?editors=1010 by Sahil89 (@Sahil89) on CodePen

@OSUblake Do I get the trophy?

May 30, 2018

@jonForum Happy to help! BTW what you are working on looks really cool.

May 24, 2018

You can do something like this, by using fake cursor. It will be a lot easier to control and to get smooth animation. I am using HTML but you can do same concept with PIXI.

See the Pen aGgOwp?editors=0010 by Sahil89 (@Sahil89) on CodePen

May 24, 2018

You are using CSS transitions on those elements with .over class, which causes GSAP and CSS to try control the properties. I removed the transitions from your demo and it works fine in Firefox on windows.

See the Pen KRLQOg?editors=0110 by Sahil89 (@Sahil89) on CodePen

May 24, 2018

You can add your tweens in a timeline and then pass that timeline to the setTween method.

Quote

Add a tween to the scene.
If you want to add multiple tweens, add them into a GSAP Timeline object and supply it instead (see example below).

If the scene has a duration, the tween's duration will be projected to the scroll distance of the scene, meaning its progress will be synced to scrollbar movement.
For a scene with a duration of 0, the tween will be triggered when scrolling forward past the scene's trigger position and reversed, when scrolling back.
To gain better understanding, check out the Simple Tweening example.

Instead of supplying a tween this method can also be used as a shorthand for TweenMax.to() (see example below).

http://scrollmagic.io/docs/animation.GSAP.html#Scene.setTween

GSAP doesn't have default duration on tweens, you will need to use to, from or fromTo methods to create your tweens.

If you are not familiar with GSAP or timelines checkout the 'Sequencing and grouping tweens with TimelineLite' section on following page, https://greensock.com/get-started-js

Also check the examples page on ScrollMagic, there are enough examples to find almost all solutions, http://scrollmagic.io/examples/

May 23, 2018

I am interested to give it a try, I might be able to do it tomorrow evening but don't consider it a promise.

May 23, 2018

Ya I was hoping an event that will fire before onPress.

On mousedown, fire beforePress that will let user set the position or rotation of target.
Only then fire the mechanism of onPress internally to record values of target like position, rotation etc.

Draggable.create(target, {
  type: "rotation",
  beforePress: function() {
    // run logic to snap target to mouse before draggable starts recording values of target
  }
});

And for the second part where I was saying to hold the onPress, following snippet might explain it better.

Draggable.create(target, {
  type: "rotation",
  holdOnPress: true,
  beforePress: function() {
    // run same logic to snap target to mouse but let user animate the target
    TweenMax.to({}, 0.3, {
      onComplete: function() {
        this.initiateOnPress();
        // The initiateOnPress method is going to be different than startDrag and it will skip beforePress event
      }
    });
  }
});

May 22, 2018

Hi Christian,

Doesn't seem possible from what I have tested. We had similar question where users wanted to snap to mouse on click. You can read about what the code does in following thread,

I modified it to animate but there are some issues, like if you click instead of dragging which is if you lift mouse before transition completes, your mouse keeps dragging still, and ~~I didn't find any way to get around it~~. Fixed it by setting allowNativeDefaults to check if mouse is down.

See the Pen KREXEX?editors=0010 by Sahil89 (@Sahil89) on CodePen

You can also use proxy target and use it's value for transitioning and dragging.

See the Pen pVYdYG?editors=1010 by Sahil89 (@Sahil89) on CodePen

But all this might be possible to simplify if @GreenSock adds another event before onPress, which we can use to do any calculations and snapping. And ability to hold the onPress event until we decide to trigger it. For example, onBeforePress we can do the transition and once our tween completes use the onComplete event to trigger onPress.

May 21, 2018

I doubt it's going to be easy.

What I can think of is, let's say your mouse traveled 3 pixels, then compare closest points to the knob for 3 pixels and select one that is closest to the mouse. But there might be more problems to this solution, like lets say you move closer to the knob then you will need to add some conditional logic that will decide whether to move the knob or not.

Blake might be able to suggest something but you will have to dive a lot deeper to pull it off.

@OSUblake

May 21, 2018

Hi Puffywuffer,

That has to do with how your path is created, and what are the start end points of the path. In following demo, if you change the shapeIndex you will see that it affects they way shapes morph. You can use the findShapeIndex utility to test which shapeIndex you want to use.

See the Pen YLBeOz by Sahil89 (@Sahil89) on CodePen

Check out the following video,

But it is great to get in habit of how you create your paths, so take a look at following post by @PointC where he explains how you can change your path's start point in illustrator.

May 21, 2018

Hi FatMunkey,

With Draggable you can set a trigger element, which will basically let you drag the element but when you do that, your draggable target doesn't act as trigger itself anymore.

See the Pen ZowrGJ?editors=1010 by Sahil89 (@Sahil89) on CodePen

In my demo, lets take a look at right handle. I am setting the right handle's trigger element as element iteself, top-right corner and bottom-right corner. Reason to do that is, so I won't have to repeat the same logic for corners. I can trigger same logic for corners using the border handlers. So when you drag top-right corner, it triggers both top border and right border.

Why I am using triggers and what are they?

Those are DOM objects that I am creating but not appending to any elements. The dollar sign was just something that people using jQuery use while creating variables that use jQuery object(initially I was using jQuery to create that demo but dropped it), so it has nothing to do with entire logic. I am creating those proxy elements to simplify the logic, if I use draggable on border elements directly, they will get thrown off out of their position and it will take a more complex solution to keep them in position. Does that help?

See the Pen bMzLEE?editors=1010 by Sahil89 (@Sahil89) on CodePen

May 19, 2018

Check out the following thread that shows how you can drag along the path. You should able to draw your Path using total Length and knob's current position using that demo.

May 19, 2018

The transformOrigin only applies to transforms like scale, skew etc. not when you animate height/width. You will instead have to shrink your column1, column2 to achieve that effect.

May 18, 2018

I personally wouldn't code it like that because making any changes would be really hard, for example if you change number of panels then you will have to adjust everything else. Take a look at following similar thread.

See the Pen jZXPVQ by Sahil89 (@Sahil89) on CodePen

May 18, 2018

You will need to animate multiple tspan elements.

See the Pen ELOqGR?editors=1010 by Sahil89 (@Sahil89) on CodePen

May 18, 2018

The updateTo method only works with generic objects and not dom objects. In docs you can also see that you can get unexpected behavior for reversing tweens.

https://greensock.com/docs/TweenMax/updateTo()

See the Pen LmXKOy?editors=0010 by Sahil89 (@Sahil89) on CodePen

What you are trying to do can be achieved using invalidate method. In following demo, onRepeat I am updating the values in vars object and then invalidating the tween. You can repeat the same logic for resize event so you won't see any odd behavior.

See the Pen deQxNq?editors=0010 by Sahil89 (@Sahil89) on CodePen

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

ScrollTrigger Demos

Downloads

Posts posted by Sahil