Leaderboard

Turns out his is fairly trivial :$ with the correct use of the .startDrag() call. Thanks all!

Thanks Sahil, That helped a lot, tho probably my question touches to many topics at once. I need to prepare more relevant demo for this because it's nth time I have problems with nested timelines - probably I'm doing something wrong over and over again

I didn't know if there was a showcase thread but I wanted to share my latest website with you all. https://zadesigns.com make sure to check it out on both the Phone and Browser because it's been designed to be friendly to phones. The site was created with Angular 4.4.6 / UI-Router / Material Design / GSAP 15 / ScrollMagic / SplitText Thanks to Jack and everyone at GSAP for making really great products! Been using GSAP since the good old days of Flash. Also congrats on the new Animation UI dev tool! I haven't had a chance to use it yet but I wish I saw it before I made my site! Thanks! Zuriel

@mikel thanks, looks like op answered his own question but it needs some work for touch devices as it isn't working on mobile. I guess it can be easily fixed by correct events. I did consider raising events to trigger drag and realised it will need event data and seemed too complex. Just to make us feel better, docs say you will rarely need startDrag.

Hi, ok - I did not understand your briefing correctly, completely. Your example is cool ... Great job @Sahil. Maybe, it does not meet your goals @shaunhurley, but - just for fun - enter would be something feasible also: Kind regards Mikel

You can do that by dragging actual element, and leaving a clone in the place of original element. Create a function that adds draggable functionality to element and call it every time you create new clone. While dragging, just drag actual element and leave the clone behind. I had created a partially functional demo but wasn't sure about your actual requirement so didn't finish it. I also was a little confused because you mentioned offset. In case you are dragging the element into the another container, you can just append it to new container and it will stay attached to current drag.

Hello @Yashi I've spent some time on this issue - still a crude implementation at the moment but it should be enough for educational purposes. I'm going to have a really busy week so, I might not have much time to polish this but I might come back later to make this smoother and add some extra visual sugar. I know see the reason you were using pointer-events. It could be used in this situation to control who's responding to the mouse and who shouldn't but I think it ends up adding unnecessary complexity. A simple solution to get around your clicking of buttons is to simply add a tiny bit of customised z-index. Here's MDN's documentation on the z-index property. Be sure to read it and the relevant links in it if you are not familiar with it. See if the bellow helps you:

Hi @shaunhurley, Have you ever looked at this? https://greensock.com/forums/topic/15536-cloned-draggable-element-have-etra-styles-and-classes I am not sure, but could be a solution. Happy cloning and dragging .. Mikel

It's alright. Feel free to ask more questions. Though, always a great idea to go through docs. And there are other resources to get started https://greensock.com/get-started-js

If you want a different animation for the reverse, I'd take a look at this recent post by @Carl. That one is dealing with a click, but you can make it work with hover as well. Happy tweening.

Two other minor comments: You don't even need to use a real target on that final (blank) tween, like tl.to({}, 30 - tl.duration(), {}) or even tl.set({}, {}, 30 - duration()). If your goal is to stretch the timeline so that it fills 30 seconds exactly (rather than putting an empty filler at the end), you can set its duration after populating it with all your tweens, like tl.duration(30) which will set the timeScale accordingly. Happy tweening!

You don't need to use seek() to play timeline. As for using functions along with global timeline and pause child timeline, I am not completely sure if it is right answer. I spent some time trying to figure it out. My current solution is to create paused child timeline that gets returned by function and assign it to a variable. Then play it when you add it in master timeline. To remove timeline use masterTimeline.remove(variable) and pass that variable so you can pause it. @Tasty Sites You were doing this right. Also, you were using '.add(movebox());' which executes that function rather than passing child timeline to master timeline so use '.add(movebox)'. But when you do so you can't pause child timeline without affecting rest of the timeline that's why I am using remove method. There maybe better solution but at least this will get your thread started.

You can just listen for enter/leave events. Happy tweening.

Yeah - my fault. I should have asked if you were familiar with the setPin() method first. Here's a link to the docs for it: http://scrollmagic.io/docs/ScrollMagic.Scene.html#setPin Happy tweening.

Sorry, you've lost me now. I was referring to setting a pin with ScrollMagic. Here are a few demos from other forum questions, but they all show how you can pin a section for a duration, have some sort of action and then release the pin. Unless I'm missing something obvious here, I would think that would work perfectly for your needs.

Hi @barrowman Just to add my 2 cents worth to Super @Carl's answer, you can also put a counter in your onComplete function. Maybe you want to do a complete play a few times and then a partial play and then end. You can increment a count variable and play accordingly. Happy tweening.

Instead of telling the timeline to repeat (which will make it go back to the beginning) you can use an onComplete callback that plays from wherever you want var tl = new TimelineLite({onComplete:playFromCustomSpot}); tl... function playFromCustomSpot() { tl.play(5)// play at 5 seconds or a label }

Sorry, no demo, but you can detect when an element is in the viewport using the new Intersection Observer API. There's also a polyfill for older browsers.