Jump to content
Search Community

Translate3D conflict with Draggable and Bezier tween

Patrick Denmark test
Moderator Tag

Go to solution Solved by Rodrigo,

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,

 

As shown in the codepen, the issue I'm having is that whenever I finish dragging the object, the Bezier tween of that object stops, as both the Draggable and beziertween use Translate3D. While experimenting, I found that only x,y properties on both provide smooth animation and are not breaking the position of elements. Using margins or top/left positions renders bezier animation to be choppy, while using those types for Draggable causes the elements to be thrown off their initial positions. You can see the full-scale animation I'm working on at http://patmir.com.

 

Using onDragEnd to re-initialize the bezier tweens returns the objects to their initial positions, which I want to avoid.

 

The question is:

What would be an appropriate solution here?

I'd rather avoid having to re-initialize tweens and modyfing the tweens to use current position of elements, as it might decrease the site's performance significantly.

Using different types for Daggable won't work, as the elements are positioned on top/left based on % and calc().

 

I would appreciate any insight into what I'm doing wrong here,

With Best Regards,

Patryk 

Link to comment
Share on other sites

  • Solution

Hi Patryk and welcome to the GreenSock forums.

 

First, thanks for the codepen and congratulations on your portfolio, great job, love it!!!

 

The first thing happening here is an overwrite conflict because both instances are pointing to the same target and tweening the same properties. I don't know of a way to handle overwrite in Draggable instances like you can in regular ones. Luckily by default GSAP uses the "auto" setting which is the most appropriate in most cases. Because of that the bezier tweens are not killed , but since the Draggable instance is modifying the same properties, neither play(), restart(), resume() work.

 

I played a bit with your codepen and using getTweensOf() for the Draggable target, I found that the instances are untouched so they can be used again, so I thought about using invalidate() in order to clear the starting values and play them again. This worked but the bezier animations started where the elements were, when the page was rendered, so no good. Then I tried using relative values in the bezier parameters instead of absolute ones, like that the tweens will start again from the current position after being dragged. That worked out:

TweenMax.to($("#menu-home"), 8,
{
  bezier: 
  {
    //use relative values instead of absolute
    type: "cubic",values: [{x: "+=0",y: "+=0"}, {x: "+=20",y: "+=20"}, {xx: "-=40",y: "-=20"}, {x: "+=0",y: "+=0"}]
  },
  	repeat: -1,	ease: SlowMo.ease.config(0.5, 0.1)
});

		TweenMax.to($("#menu-projects"), 6,
{
  bezier:
  {
    type: "cubic",values: [{x: "+=0",y: "+=0"}, {x: "-=5",y: "+=5"}, {x: "+=20",y: "-=10"}, {x: "-=15",y: "+=5"}]
  }
  ,repeat: -1,ease: SlowMo.ease.config(0.5, 0.1)
});

		TweenMax.to($("#menu-about"), 4,
{
  bezier:
  {
    type: "cubic",values: [{x: "+=0",y: "+=0"}, {x: "+=0",y: "-=15"}, {x: "-=15",y: "+=0"}, {x: "+=15",y: "+=15"}]
  },
  repeat: -1,ease: SlowMo.ease.config(0.5, 0.1)
});

Draggable.create("#menu-home , #menu-projects, #menu-about", 
{
  			type: "x, y",
  			bounds: window,
  onDragEnd:function()
  {
    TweenLite.getTweensOf(this.target)[0].invalidate().play();
  }
		});

I forked your codepen:

 

http://codepen.io/rhernando/public/

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Hi Rodrigo,

 

Thank you for your reply, this indeed resolved my issue. :)

 

I do however stumbled into another problem. The animation works smoothly in Chrome/Win 8, tough on Firefox/IE/Win 8 (Same machine) or Chrome/Win7 on old machine (Software up to date), the animation is "jumpy". You can see it here:

 

See the Pen JgcEh by mussler (@mussler) on CodePen

 

using Force3D or not doesn't seem to have any impact, in both cases I get smooth 60fps in Chrome/Win8, and roughy 20-25 fps in Firefox/IE/Win8 and Chrome/Win7.

 

I hope it's not too much to ask for an expert to look into that.

 

With Best Regards,

Patrick

Edited by Patrick Denmark
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...