neworigin

Thanks for the clarification on using pause(0). Exactly what I needed!

Thanks for the responses! I had initially taken an approach with functions but my main issue is I want timeline 1 to restart before timeline 2 ends as the gap at the end is too long. I guess I'm not seeing a way to do that with your approaches above. Any idea why my version is getting that restart for the second timeline when it loops?

Hello there again, In the ongoing struggle I created a new topic as I've got the gradient animation sorted (thanks again!). I am now seeing an issue with trying to loop multiple timelines. The attached pen is close but I am seeing a the logo (white bars) restart after a quick second once the timeline loops. This seems to happen if I put more than a half second here: .call(animLogo, null, ">-0.75") The idea is to have a slight overlap of the timelines when they loop so the gap isn't so long at the end.

After looking around a bit more seemed like a better approach is to put elements into into separate timelines looping them individually with repeatDelay. Tried this but because I want the the number (45) to display longer then the bars its starts to get out of sync. Is there a way to use labels and maybe control the loop at specific times? https://codepen.io/neworigin/pen/zYwLqmj

Thanks much for the suggestion of animating a gradient mask. Definitely a better approach. See update pen below. https://codepen.io/neworigin/pen/VwbBZeG Any recommendations on how to do this with more of a cross dissolve? Would like to shorten or overlap between the elements as the gaps are too long currently. I tried using positioning parameters but it was cutting into the animation.

Hi there, I've been struggling with animating gradients for SVGs as well as getting them to sequence correctly on the timeline. In the attached pen I'm trying to have the items in the circle fade in from left to right and then fade out from left to right and loop. I'm animating the offsets, opacity and stop colors of the gradients and its seems to be working but I can't get them to sequence correctly. The '45' comes in at the beginning instead of after the 'pause' buttons despite using a position parameter: .to("#grad2 stop:nth-child(2)",0.5,{attr:{offset:'1'}},"+3") Is there another way to get the elements to sequence correctly or perhaps a better approach for animating the gradients to achieve what I'm looking for?

Got it... added new timeline for pager to the function after height is set. https://codepen.io/neworigin/pen/OJmRVrw Loving this stuff, thanks again!

Thanks for sticking with me on this! I feel its close... The main issue is that I need to call the pager animation after the text blocks have rendered in order to keep them consistent. I tried looking into onComplete but since the pager timeline is an infinite loop it never completes. Your above example doesn't autoplay. I'm thinking I could incorporate a setInterval but guess I'm wondering if there is an easier approach before I pursue that ?

Hi Carl, thanks for the example. Very helpful but I would like the slides to continue to play after a few moments so you can see I'm passing in data attributes to control timing. I think my issue was the nested timeline so I used the getNestedLabelTime helper function to get the nested label names and convert them to actual times. https://codepen.io/neworigin/pen/MWmeMOj Perhaps there's a better way? One thing I'm still unsure of is why the pager circles re-render when I click the first circle only. Seems like it should be responding like all the others.

Thanks for the responses! Not sure about using tweenTo. I don't want the intermediate steps to show but rather just jump to the corresponding label nd play. I tried adding the labels: for (let i = 0; i < words.length; i++) { let wordTL = gsap.timeline(); wordTL.from(words[i], { opacity:0 }) .add("label" + i) .from(circles[i], {backgroundColor:'transparent'}, "<") .to(words[i], { opacity:1, onComplete: getTextHeights}) .to(circles[i], {backgroundColor:'white'}, "<") .to(words[i], { opacity:0}, "+=" + words[i].getAttribute('data-display-time')) .to(circles[i], {backgroundColor:'transparent'}, "<") tl.add(wordTL) } and then testing with a simple listener: circle.addEventListener('click', function (event) { console.log(event); master.seek("label3", true); }) but it is just jumping to beginning of timeline.

Hi there, I'm trying to leverage GSAP for a content rotator I'm putting together and am wondering how I might incorporate navigation my pagination. Currently, I have the timeline pausing when you mouseover a circle but would also like to be able to click them and have the playhead move to the corresponding slide and animate in. I'm thinking it might have to do with adding labels as I'm building the nested timeline for the rotator content but would be great if you could point me to any relevant examples. Thanks!

Thanks so much for the quick response! I took a look at the article you sent and indeed the selectors was the issue. I've updated the codepen and the parallax seems to be working. Any thoughts on the best approach for fading in the elements? I started to figure out togglreClass but wondering if you have another handy link with an example?

After going through a few of the tutorials I tried my hand at creating a parallax layout using the ScrollTrigger library. What I am trying to do is have the text slide in and have the photo fade in and then scroll upwards at different speeds to create the parallax effect. I know I need to loop through the sections but it looks like it is applying the transformations across all sections rather than each one.