Sahil
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Sahil
-
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.
- 4 replies
-
- 2
-
-
-
- control timeline
- function held timelines
- (and 1 more)
-
If it is going to repeat then you can add repeatDelay of 3 seconds, if not then just add empty tween that does nothing.
-
Ya I think you were doing it right, sorry for the false hopes. I gave it a try and couldn't find better answer. Personally I would approach it by using className so you don't have to keep track of different values, but @Carl would suggest against it I guess. As for ._gsTransform, it only let's you access values that gsap stores on DOM. When gsap tweens any elements, it attaches that object and assigns current transform properties so you can use it do any calculation.
-
On that site there is brief moment where a video plays, and if you right click it shows you videos context menu. So I guess they are setting pointer events to none and are using mouse events on window. Because it is active on entire page anyway. So you can set pointer events to none on cursor and use mousedown, touchstart event of window. Right now on mobile so can't test it but I guess this is how it can be achieved.
-
Can you post a demo? I think your implementation can be achieved with very few lines. It will also be better for you to get your own code refactored and see how something can be achieved. Follow this thread and create a simple demo with limited code that demonstrates your problem.
-
Move element based on window scroll position with easing
Sahil replied to Steven Grimaldo's topic in GSAP
Following is demo I created today for parallax effect which triggers after mousemove event ends with slight delay of 200 milliseconds. You can apply similar logic along with ScrollMagic to get desired effect. Right now checking on mobile, you can see that once event ends there is slight odd movement by elements that indicates that easing effect is added when scroll ends. -
Move element based on window scroll position with easing
Sahil replied to Steven Grimaldo's topic in GSAP
Have you tried ScrollMagic? It can be easily achieved with ScrollMagic and GreenSock. In ScrollMagic you can set duration for animations, it causes your animation to progress based on scroll. -
Sorry, hard for me to figure out what is your goal. Can you explain what you are trying to do?
-
What are you trying to do? and why does it have different class than rest of elements?
-
Updated demo, you just had to set them as inline-block, you can remove callback if you don't want to hide them.
-
I have used onComplete to hide them back.
-
Where is the problem?
-
Here is demo with delay before parallax effect happens. You can play with movement, timeout and ease effects to see what works best for you.
-
If the sidebar contains the target element, then it shouldn't trigger mouseout. A demo would help.
-
Move element based on window scroll position with easing
Sahil replied to Steven Grimaldo's topic in GSAP
Unanswered question? that's strange. Take a look at following thread, it must be what you are looking for. -
Ya you can have multiple elements with different movement, which creates this effect. They all are probably reacting to same event with different movements. You can create similar effect by setting different movement. I have updated demo with two elements. About gyroscope, you must have seen 360 video on mobile. By using parallax.js you can have same movement as we move mouse whenever user physically moves the mobile.
-
https://greensock.com/get-started-js That's where you can start quickly. There are other videos on the channel which are essential. After that spend some time reading docs so you get familiar with all available options/features. That should be enough to get started.
-
Well to add further, if you ever decide to move .call() ahead of tween which you most probably will, you will run into issue. What right now happening is, function is called only after entire animation and if you mouseout, it never gets called on play or reverse. But if you move it ahead, it will be called on mouseover and mouseout at the start(play) and end(reverse) of timeline, respectively. As a result, when you hover first element it's content will get cloned but by the time previous mouseout will complete and due to reversed timeline, it will call the function and set its content into secondary div. Here is demo that fixes this issue by keeping track if mouse is on the element and only then content is copied. You can fork my previous pen and move call ahead of tween to see what I mean.
-
You mean you want them to appear as soon as you hover over? Just move .call() before .to() in timeline.
-
Oh I thought you will figure it out so I didn't bother to do it There may be few other minor complexities depending on how your actual implementation is going to be, but if you are just going to add ul which basically strips out text and inserts ul tag in secondary div. If you had used $elem.html(), it will include that text too. Then there are other situations where you can use map. Feel free to ask more questions rather than banging your head for an hour.
-
@OSUblake I thought you will have some corrections or different approach. One question, in case I try to implement parallax effect to respond to gyroscope, what entire set up is going to be? No, I am not going to actually do it, I would rather use parallax.js but curious about how you can implement/test such device specific effects. Edit: it can be emulated on chrome.