MikeTheVike

@OSUblake We have tested on a touchscreen monitor and it didn't scroll the page. This was on a Mac using Chrome. It treated finger presses just like clicks. Ultimately the final hardware we will use is a Windows machine with Edge browser. It would solve a lot of issues I think if we could scroll with a finger natively without JS. Will have to test on a Windows machine for sure. I'll also give your code a whirl, it would be nice if I could rely on on less JS plugin. Thanks guys, I might be back

@PointC, I should have mentioned that at the start. This will be displayed on a large touchscreen TV. Users will be able to swipe vertically to move through the "timeline". So we need the drag to work on the whole screen to move the timeline. There will also be popups when tapping on the images that will let users swipe to move through the content on the popup. @Jonathan , I'll keep the draggable off the body, thanks for the info. Currently the codepen example has it on a div wrapper around everything. It "works", but the parallax animation is not smooth like it is with scrolling with the mouse. I'm using a Mac and viewing it on Chrome. Also, I'm a javascript noob, if you guys know anyone who is a pro at this kind of stuff, we are willing to pay for help. Thanks!

Craig, thanks for your help. I wasn't aware of Draggable, and I have been working on implementing that. It has some features that I was wanting anyway, like momentum. I have updated the Codepen with Draggable and tried to delete a bunch of stuff that wasn't applicable to my issue. If you are tired of helping me with this, please just say so :P. If you scroll with a mouse wheel, the scrolling and parallax works great and is nice and smooth. When I add Draggable to the .timeline_wrap class, it won't scroll on click. Same result if Draggable is added o the body. I have also tried the different drag "types". Some don't do anything, like "scroll" and "scrollTop". If I attach draggable to the body with "type: y", it works, but I lose my parallax. If I attach it to the ".timeline_wrap" with "type: y", it scrolls the page, and the parallax works, but it's no longer smooth. Seems like no matter what I do, I fix one thing, break another. And I apologize, I don't know if this is a Greensock, ScrollMagic, CSS issue, or a combo of all so I keep bugging you about it. Thanks for any ideas!

PointC, thanks for taking a look. Sorry, I realize there is a lot of crap in there right now. You are correct that it works "ok" on load on the codepen. If you take a look at the CSS, there is a "height: 1080px;" that is commented out. Remove the commenting and then run it and notice the parallax scrolling animation is not smooth anymore. I'm trying to figure out why adding a fixed height to the body is making that happen. I'm not sure if it is a GSAP issue or a ScrollMagic issue, or maybe it can be solved with the right CSS. Any ideas would be great, thanks!

The CodePen css produces a nice smooth parallax scroll through my scenes(using ScrollMagic)... When I add a height to the body of 1080px, the parallax still works, but the animation is really jumpy. Why does a fixed height on the body affect the animation so drastically? I'm hoping to solve this issue because I'm putting a drag scroll on everything, and it doesn't work when there isn't a fixed height on the body. Thanks for any ideas!

Thanks Jonathan, it makes sense and I will look into modifying what I have going. Thanks for the detailed answer!

ohem, thanks for the info and sample code. I can see how hiding the wrapping container would work in this situation. I wonder if GSAP isn't the best thing for this type of functionality? Seems like hiding the wrapping container might not always work out. I've previously used wow.js for things like this. Thansk for your help, can't wait to dig in more.

I'm messing around with adding some simple fade/slide movements to a website. It's working except the elements are visible while the page loads, then when the GSAP JS activates, the objects disappear and animate in to the original positions. How do I get around this? Do I need to position the elements and set the opacity to 0 using css initially? I tried this, but that means tweenFrom doesn't work correctly. I setup a codepen with just the site navigation. It's a little hard to tell it's not working because the page loads much quicker, but there is a brief flash of the elements before they animate. Any help would be awesome, thanks! http://codepen.io/MikeTheVike/pen/kXKgRA

Thanks for the quick reply! I read the FAQ question like 20 times and skimmed right over the "overwrite". That worked, thanks!

I'm new to using TweenLite, used Tweener in the past. I'm working on a banner ad and need to keep file size low. With Tweener I could put tweens sequentially and just set a delay. It would go through and activate the tweens when the delay number was hit. I'm trying something similar with TweenLite and it's not working, I think the second tween is canceling out the first one before it's delay time is met. How do I accomplish something like what I have in the code below? Thanks! TweenLite.to(mc_text_01, .5, {scaleX: 1, scaleY: 1, alpha:1, ease:Back.easeOut, delay: .5 }); TweenLite.to(mc_text_01, .5, {scaleX: 0, scaleY: 0, alpha:0, ease:Back.easeIn, delay: 3 });