Jump to content
Search Community

Control timeline with Draggable (same target)

Rhinogram 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 all,

Building off of the question from 

 which related to impacting a timeline that had a separate target than the draggable instance, can you control a timeline that has the same target? For example, an offcanvas menu that may be triggered open via a "hamburger icon" and then can be closed (reversing the timeline) by clicking outside of the menu, but also be able to impact the reverse timeline by swiping it close with Draggable? 

 

In this scenario, you'd be using a certain attribute of the tween (x) along with the current position of `x` in Draggable.

See the Pen BdJNbQ by zslabs (@zslabs) on CodePen

Link to comment
Share on other sites

Hey @OSUblake I've added a CodePen example for a reduced test-case and having a bit of trouble. Is the modifiers plugin required in order to interact with the "x" attribute onDrag? After I open the off-canvas menu, attempting to drag it close is very jittery and gets in a state where the timeline progress is off.

 

Ideally this will also have the ThrowProps plugin, but trying to start small. Any pointers would be greatly appreciated. Thanks!

Link to comment
Share on other sites

My previous question doesn't actually seem to change anything, so I think we're good there. But, within the following fork of your example:

 

See the Pen LjeZvR?editors=0100 by zslabs (@zslabs) on CodePen

If you try to drag on those links, it looks like Draggable will not run, but I'd still like them accessible when a normal click is done on them. I did find 

See the Pen ByMwwY?editors=0010 by kyd (@kyd) on CodePen

, but based on the date of that pen, wanted to see if you had another suggestion or if there was something native to help with this. Thanks!

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