Shaun Gorneau

@gredesign Nice site! It's not GSAP that's causing the issue though. It's that you are setting the top of the video element to 50%. A quick glance at the JS and CSS doesn't show that the top property is being set anywhere but inline (I could be wrong there). But I would look at that. <video style='margin: 0px; left: 0px; top: 50%; width: 100%; height: auto; right: auto; bottom: auto; background-image: url("https://assets.website-files.com/5e59a48b9e288f23a8e10a61/5e6c798975d1aef54897b2aa_INTEL_OLYMPICS_TOKYO_SIZZLE_60sec_h264-poster-00001.jpg"); position: absolute;' autoplay="" loop="" muted="" data-wf-ignore="true" data-object-fit="cover" playsinline=""> <source src="https://assets.website-files.com/5e59a48b9e288f23a8e10a61/5e6c798975d1aef54897b2aa_INTEL_OLYMPICS_TOKYO_SIZZLE_60sec_h264-transcode.mp4" data-wf-ignore="true"> <source src="https://assets.website-files.com/5e59a48b9e288f23a8e10a61/5e6c798975d1aef54897b2aa_INTEL_OLYMPICS_TOKYO_SIZZLE_60sec_h264-transcode.webm" data-wf-ignore="true"> </video>

Happy to help!

Hi @Cazza, Rather than create two functions constructing/modifying the same timeline, it would be better to create two timelines and allow your button clicks to control the playback of each. If you have more than two interactions that need to be accounted for, there are other things we can do ... but to solve your issue here, have a look at this CodePen. https://codepen.io/sgorneau/pen/XWmOjdZ Happy Tweening! Shaun

Here is a great tutorial using WebGL and three.js https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/

The set that fails is because your opening script tag is terminated after the type property, so you're writing this <script type="text/javascript"> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" </script>

Hey, we've all been there. But, as with anything, you'll find that you save time once you understand the concepts. There's no shortcut to that (other than hiring out). Without time and understanding, it's just throwing darts in a dark room. But, when you do have the concepts under your belt, building on other people's work will DEFINITELY save time (thanks @GreenSock!!) ?

Yes, as far as all the transitions go. The new page content is an AJAX call. From a workflow standpoint you would On click (of something leading to a new URL ... make sure your handler does event.preventDefault() ) 1. Tween out anything you want that's on the page currently 2. Make your AJAX call for the new content 3. Modify the current URL 4. Tween in anything you want tweened in

It would be helpful if you can could demonstrate something not working in CodePen.

Unfortunately, no .

I don't see anything that is going wrong (in CodePen) except for access restrictions when calling other domains. https://codepen.io/sgorneau/pen/vYNQWOV?editors=1010

Happy to help!

Beep boop ?

That was pre-coffee this morning, lol. ? I'm a 0/1 kind of guy, but even here I usually use true ?

Hi @tash2020, There are quite a few syntax errors in your code, to start. Semicolons, while not required, should be used ... it helps to understand the code better. And then there are a few logic and structure issues. First thing I'll point out is your goal is to compare certain dates to the current date ... but there is not current date established anywhere. Putting that aside and using some created dates, we can move onto the other issues. If you want the timeline to play only if conditions are met, it's easier to use the pause property when constructing the timeline. const tldot = gsap.timeline( { repeat: -1, paused: 1 } ); This block is not closed properly, and you can't compare three items in this way. You'd have to create a function that takes 3 (or more) values and does the comparison and returns true/false. const isBlinking = (date1, date2, date3) => { if(date1.getFullYear() === date2.getFullYear() === date3.getFullYear() && date1.getMonth() === date2.getMonth() === date3.getMonth() && date1.getDate() === date2.getDate() === date3.getdate()) tldot.play(); } else { tldot.pause(); } Here is a codeine addressing these issues. https://codepen.io/sgorneau/pen/jObvXbK?editors=1111

How are you addressing the element(s) with these two classes? gsap.to( '.dragObj.num1' , {} ); ... is what you should be doing if you’re not already. https://codepen.io/sgorneau/pen/QWjVJem Shaun

I'm coming up for air for a few weeks, hopefully I'll be around here a lot in that time! ?

Hi @Yaya! Awesome that you are taking the steps to understand the work you're managing! That's a big step and one you're clearly capable of! Based on your last sentence You would simplify this greatly by using a few click events and simple timelines to do this without the need for GSAP to do a lot of CSS work. Have a look here, https://codepen.io/sgorneau/pen/qBOMNPG Happy tweening! Shaun EDIT: Sorry Zach, I don't know how I jumped in front of you ?

Do you have a CodePen example of something that is giving you trouble?

I have to admit ... I'm baffled by what you're trying to pull off here that couldn't be done with a single timeline.But to answer this question specifically When you set an absolute position on any tween, you affect that specific tween relative to the entire timeline. Any subsequent tweens are still in their natural order. A simple natural order https://codepen.io/sgorneau/pen/BaNwbvb?editors=0010 Here is one tween with a single position out of order https://codepen.io/sgorneau/pen/yLNzwWe?editors=0010 Here is a tween set relative to the prior tween when the prior tween has a position label used https://codepen.io/sgorneau/pen/jOPGJjP?editors=0010 But if you want to shift all subsequent tweens, I would just use a few different timelines and place those timelines in a single master timeline with 0 positions. https://codepen.io/sgorneau/pen/yLNzrNJ?editors=0010

I've just noticed what you said about assigned dynamic position values ... and that should also work no issue with labels, offsets, and absolute values. Here I have a loop creating the timeline tweens and generating the label value (for the position). https://codepen.io/sgorneau/pen/OJVmwQV?editors=0010

Hi @osmo, There are a few ways we could tackle this. Given your example setup, one thing to do is to use relative position values that set subsequent tweens start positions back to the same time as their "partner" tween. This is easy if you are manually assigning duration values. Have a look here, https://codepen.io/sgorneau/pen/OJVmEeY?editors=0010 Another, and probably better, option is define labels and use those labels for the position parameter for each group (in/out). That way you can feel free to change durations or programmatically assign durations and the groups will have the same starting point. https://codepen.io/sgorneau/pen/xxGdJKP?editors=0010 Also a quick note, you are calling in GSAP 3 (which is perfect), but using GSAP 2 syntax .. small change from var tl = new TimelineMax( { repeat:'-1' } ); to var tl = gsap.timeline({repeat:'-1'}); Happy tweening!

Hi @noclip27, You'll want to use repeat with a value of "-1", which means repeat infinitely. I've also switched the code to GSAP 3 (with explanations in the comments) to show you how that would be done. https://codepen.io/sgorneau/pen/jOPmmLg?editors=0010 Also ... check out how using 'defaults' can make this even simpler! (best to view these pens at their links so the JS doesn't wrap) https://codepen.io/sgorneau/pen/ExjmmLW?editors=0010 Happy tweening!

Ah, sorry @ZachSaucier! I had just started to reply when I got pulled away from my desk. I should know to back out fully when that happens! ?‍♂️

I'm not on a retina display ... an older 2015 iMac