Shaun Gorneau

No worries, so do I. And that's the fun part!

You could shorten it up big time by tweening the red line and then putting the blue line tween on a timeline that repeats infinitely. http://codepen.io/sgorneau/pen/RPrwJy

Do you have a more complete codepen that shows what you would like to do? Should the box appearance be triggered by (and start at the position of) a click event?

It seems you're asking about the banner image/slideshow transitions. This would be quite a simple setup. I would image setting up a stack of divs, each containing an image and a few text elements (in their final positions) and then treating each "slide" as its own timeline stuffed with from() tweens ... all then stuffed into a master timeline to manage the transitions between slides and the progress bar. I'll see if I can create an example in a little while.

I'm not fully sure what requirements you have, but you could tween x and y along with using more flexible positioning. Something like this. http://codepen.io/sgorneau/pen/QbjvZV

Absolutely. You just need to respond to a click event and pass the x/y to a tween created in response to the click. Here is an example, http://codepen.io/sgorneau/pen/bddLwL

set() is a zero duration tween ... and tweens are valid for properties with numerical values. I believe that is your issue here (I could be wrong though ).

A codepen of this would help greatly.

Thanks drewbit, I appreciate it and don't mind at all! Totally unnecessary, but appreciated nonetheless. The link to my profile is fine; seems the most relevant in this context. Nice tutorial btw!

It certainly is ... but how you would do it would really depend on what the requirements are. I have a system I built for digital displays (using TimelineLite) which makes use of image slideshows, video, and embedded (iframe) content. Each item (slideshow, video, iframe) is placed within its own tl added to a master timeline. The duration of the video is used to set the duration of its parent tl while animating the top property (from 0 to 0). I use the video state "canplaythrough" to affect the state of the timeline (pause, resume) so that the tl position stays in sync with the video playhead (to account for buffering). You can introduce event listeners for other states to accommodate scrubbing and such ... but I only needed playback.

The way to do this would be to Use Javascript to duplicate the repeated image once and append it to the container (no need to put them in markup) Use CSS to position these images side by side by telling the container not to wrap Tween the x property of the *container* to the width of the single image (this will move both images in lock) Repeat the tween infinitely (-1) Here is a codepen to demonstrate: http://codepen.io/sgorneau/pen/KpwWgy

Also, be sure that your absolutely positioned element is not a child of a relatively or absolutely positioned element (unless that element is the size of the viewport). http://codepen.io/sgorneau/pen/OVJpbm

Carl, those are great tips! Thanks! That will definitely help with some other projects I am working on

Absolutely! It would be pretty much the same technique used for parallax: put an <img> in a <div> ... set the <div>'s overflow property to hidden and Tween the <img> top property from one value to another. In this case, however you would want to tween the top and left properties together to move around the image. Like this, http://codepen.io/sgorneau/pen/jERzgN I would go a step further and change the animated properties (top and left) to "transform: translate3d()" for smooth, hardware accelerated movement. http://codepen.io/sgorneau/pen/NPmMPZ Lastly, I would probably tie the animation to the scroll position.

The problem you're having (if I'm understanding correctly) is that the same "random" value is assigned to the three .bubble elements. This is because of the staggerFromTo ... it's receiving one set of from properties/values and one set of to properties/values. Given there are only three in this example, this codepen should help http://codepen.io/anon/pen/KwJRjo If this is to be ramped up to many more bubbles, I would create the timeline vars dynamically in a loop. But, this will assign each bubble a start and end value for x/y ... but that value will live on for the duration of the page life. If that value needs to change, I would think you could dynamically set it with a callback.

So I've been a huge fan of GSAP for a long time. I've recently had the idea to create a complete web-based digital signage platform using Drupal as the CMS behind the scenes ... and GSAP's timeline is perfect for handling this type of sequencing. I have the system built and it runs absolutely perfectly (in terms of how I want it to run). It allows for video, image slideshows, and iframes for "slides" (timeline items). All "slides" fade in for a second, remain "on" for a determined duration, and then fade out for 1 second. For video, the "duration" (in seconds) of the timeline item is set to the duration of the video (in seconds) by simply animating the top to 0 for that duration (the top is already at 0). For iFrames, it set to a value in the CMS. For slideshows, there is no need to set a duration since the stack of <img>s are set to staggerTo modifying the autoAlpha property. Images are loaded as is on the page load, like this <div class="image-slideshow slide" id="social-dining-febmarch-9-slideshow" style="z-index: 92;"> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B4.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B5.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B6.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B7.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B12.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B13.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B14.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B16.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B17.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B19.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-MemberNews1.jpg" /></div> And the timeline setup for this particular slideshow var SocialDiningFebMarch9SsTl = new TimelineLite(); SocialDiningFebMarch9SsTl.staggerTo( "#social-dining-febmarch-9-slideshow img", 1.5, {autoAlpha:1}, 7 , "SocialDiningFebMarch9Slideshow" ) .to( '#social-dining-febmarch-9-slideshow' , 7 , {top: 0} ) // adds time to last slide .to( '#social-dining-febmarch-9-slideshow' , 1 , {autoAlpha: 0} ); video is loaded on demand as to not overload the browser with video data by outputting something like this <div class="video slide" id="your-time-ad-10-video-wrapper" data-src="http://localhost/sites/default/files/videos/original/YourTimeFade.mp4" data-bkgd-audio-level="0" data-frgd-audio-level="1" style="z-index: 91;"> </div> And when the video's timeline is active, I use the onStart callback for the timeline item to dynamically create the video element and its attributes with the attributes on this "placeholder" div element. When the timeline is done, the video element is destroyed. The iframe content follows a similar pattern to video. The first run can be a little rough without a solid broadband connection as it downloads and caches content, but subsequent runs are nice and smooth. My big question is ... and I don't think this is a GSAP problem, but I know there are a lot of smart people on here , this thing runs great loop after loop but then all of a sudden will just freeze. It could be 30 minutes in, or 3 days in. This happen in both Safari and Chrome in OS X and is inconsistent in terms of where/when it decides to crash. I'm keeping a global variable to count how many times the master timeline is played and I refresh the browser after 3 runs. This 1) allows new content to be displayed in the presentation on a regular interval and 2) allows the browser to clear it self out (or so I thought) from a Javascript standpoint. This runs on a dedicated Mac Mini (2.5GHz i5 with 8GB ram) hooked up to a transcoder for broadcast at a cable station's headend. I have tested on a local Mac Mini (i5 2.3GHz with 16GB ram), on a local MacBook Air (1.7 i7 with 8GB ram) and in all cases it runs great, until it doesn't. In all cases video is MP4, there is an MP3 audio track playing until it is instructed to stop for video and then resume when that video has finished. I'm just wondering if there is anything I could be doing from a Javascript standpoint to optimize this so that it runs as well it's 100th time as it does its second time. Here is a URL to look at how this is all running (only tested in Safari and Chrome). http://rp38.barulesign.com/presentation/channel-38 ***The initial load will take some time for the first video (probably) which will cause the slide to terminate what appears to be prematurely. I will be addressing this soon by making the sub timeline pause/play in sync with the status of the video. *** This is setup for HDTV broadcast at 1080p ... sizing your browser window to that aspect ratio will yield the best results in terms of layout. Any thoughts would be greatly appreciated!

I would just capture the mousewheel event delta, add (+/-) it to some scroll position variable. That scroll position variable value ÷ the total pixel width of one animation loop will give you the value to set the progress value....you can then tween to that progress value (using the progress property) making for a nice, smooth animation without actually "playing" or "reversing" (just advancing and retreating the playhead position) A lot like I'm doing here http://www.discoverreynolds.com/concepts/discoverreynolds/

I got it!!! The problem was the easing... easeInOut TweenLite.to(drTimeline, 1, {progress:prog, ease:Strong.easeInOut}); Changed to TweenLite.to(drTimeline, 1, {progress:prog, ease:Strong.easeOut}); And all is good! Scrolling begins on the mousewheel event and eases into the final position! Don't know why I didn't think of that before :/

Yeah, sorry about that ... have been in there toggling between the two approaches and I forgot to comment one out

Thanks for the response Carl. Unfortunately, the first example demonstrates the exact result I'm trying overcome (precise linear tweening) without OS based inertia scrolling and the second example has the same delay issue I've encountered with my method. Essentially, the exact mousewheel "interaction" I'm looking for can be seen here https://victoriabeckham.landrover.com/US I've got some direction on a project that calls for interaction and flow similar to this site, and Blast Radius hit it out of the park with this site. Rather than do anything with their code, I've opted to learn (and support!) Greensock and build a concept from the ground up. As a prototype (proof of concept), I'm following a similar flow to their site to gain an understanding of timing and control. You can see the scrolling issue I'm having here http://www.discoverreynolds.com/concepts/discoverreynolds/index.html Basically, it's waiting until I have stopped using the mouse wheel before the tween kicks in. Side note: all I'm working with right now are mousewheel and arrow keys (no scrollbar or touch) Any thoughts from anyone would be much appreciated

@carl schooff: This is exactly what I have been looking for! But, I can seem to fiure out just how I should use it in my situation. I have a Timeline created to contain a bunch of Tween.to inserts and that alone works wonderfully. The timeline is paused by default and I'm using the mousewheel event's delta to affect the current scroll position (that is the css "top" value of a container with a wrapper set to overflow:hidden). This new value (scrollPos) divided by the total (scrollHeight) gives me a timeline progress position to move to ( value between 0 and 1) using myTimeline.progress(prog);. In OS X, this looks fantastic due to the OS wide inertia scrolling in combination with "swipe" scrolling. That intertia continues to fire the mousewheel event with decreasing delta value resulting in a very nice ease out. But, when maintaining "touch" of the trackpad/mouse during the mousewheel, you get a very linear movement. And, of course, no amount of easing happens with intertia scrolling off or in Windows. Now, using the method above instead -- TweenLite.to(myTimeline, 1, {progress:prog, ease:Strong.easeInOut}); -- yields a very nice easing motion in response to the mousewheel delta when intertia scrolling is off and in Windows browser's ... but it appears to delay until the last delta is calculated meaning the TweenTo doesn't begin until the final delta is fetched (technically, I don't know what is happening but that is the best I can describe it). What I'm looking to do is a hybrid of the two. Basically what I'm looking to do is this - Mousewheel movement that allows the timeline progress to ease into position but that provides close to realtime response at start and move. Does anyone know how I can accomplish this?