Sean Ravenhill

Thanks @Rodrigo much appreciated.

Hello everyone, I've been trying (without much luck) to find good training and tutorials on using GSAP with Vue3 and specifically the Composition API. (Perhaps my google-fu is weak?) Would be greatly appreciated if anyone on here has some helpful links to share. Thanks very much.

https://tailwindcss.com/docs/width#:~:text=w-screen,%3A 100vw%3B ? https://tailwindcss.com/docs/width#:~:text=w-screen,%3A 100vw%3B @Cassie Maybe these little tid-bits will entice you to take a deeper dive into Tailwind (*This message is not sponsored by Tailwin ?) I believe it gives you approximately 67 unique utility classes, just for widths, out the box. Then you can still add whatever you want in the tailwind config file... and yet you can still add custom css in the style.css So for example this would give you a block that is 50% <div class="w-1/2"></div> And if you wanted to use something arbritary that you are only going to use once and don't need to go to the hassle of setting up config files or a style.css You can do this. <div class="w-[30vw]"></div> Hope this is of interest ?

@Cassie I would have agreed with you on CSS frameworks. BootStrap, Zurb, Tailwind etc. before... But when I built this site https://www.becausexm.com/ all with custom css... I truly appreciated why CSS frameworks are a good idea. I would liken it to using GSAP as you framework to handle animations. Of course you can write own custom code... but once a project hits a certain scale, and the maintenance goes beyond the scope of a team of max 3 people (Thumb sucked that number... but this is what I think) it becomes a nightmare... overwrites, bugs etc. Maybe give Tailwind another go? I think you'll be pleasantly surprised when it clicks.

Thanks for all the assistance @Cassie this is pretty darn close! Thank You!

Yes very much so, limited to having to stick with Tailwind and that Markup. The combination of Tailwind and Vue.js is the front-end Tech Stack. *The benefit is that you work in a component build system ie. Vue.js and React.js And then with this CSS framework, you avoid merge conflicts, and as it's not a custom style.css teams are able to quickly and easily pick up a component and work on, again without their own biases or approaches to writing CSS.

@Cassie I've taken your solution above and tweaked it a bit for what I believe are my needs. All that I have left to figure out is how to get that each of those triggers now to move in unison with the rest of the animation. I've been cracking at it for about 2 hours now, and much confess I need some help across the finish line. https://codepen.io/seanravenhill/pen/VwBwgJN

Will do for the future! Thanks for the tip.

@Carl My pleasure, I hope you find it helps you in future projects and speeds up your workflow. So I was being very foolish. I actually have an example of what I'm trying to achieve. This is precisely what I am trying to recreate. https://tympanus.net/Development/HorizontalSmoothScrollLayout/index4.html This it what happens when you are into hour 14 of a coding session ?... could have saved myself a good 7 hours of that if I had just asked the right questions and shown the right examples. Ah well... we live, we learn. I did give the code another bash with the awesome pointers you provide me. So close ? https://codepen.io/seanravenhill/pen/MWBWBar ... okay... I gotta get some rest to hit it hard again tomorrow. Wash, Rinse, Repeat!

@Carl Thank you so much for your response and edits to the code. Between yourself and @Cassie you have both gotten me very close to the intended end result. Thank you for pointing that out, I completely overlooked that it's no "no bueno" to have multiple instance of the same id! That would be the magic that is Tailwind. I would highly recommend trying it out, it goes in the face of "old school" thinking that flooding your elements with classes, styles or other attributes, is not good practise. But once you see the benefit of it, you'll be hard pressed to go back to writing custom css. It also works an absolute treat with component based workflows and libraries such as Vue.js Thank's for the breadcrumbs and signal posts so far ?! ? I can take what you have both helped me with and fine tune it to what it is that I'm trying to explain.

@Cassie Indeed! The world truly works in mysterious ways! I've been back in RSA living in Cape Town since 2013. Just had a look through both your pens... ?! Especially the second one. That is such a purrrty and elegant way to approach it! (I over complicated things... didn't I? ?) Okay, so both your versions are super close to what I am trying to achieve. Let me try explain it a little differently. If you can image a Train or a Conveyor-belt. Those cards need to move in-sync with each other, but that spacing between them needs to remain the same (Essentially that space is the Gap or Stagger if you want to call it that)... And then they shoot off alternatively in the second part of the animation *Once the centre of each card pass the left side of the centre of the view port. Hope that makes it a bit more clear ? PS, can we DM on here? Would be awesome to get your deets and reconnect. I've been off all social media save for LinkedIn since 2016. and THANK YOU SO MUCH!!!! For your assistance. You are my Nomi Sunrider or Yaddle ? https://screenrant.com/star-wars-disney-female-jedi-powerful/

Hello good people of GSAP, I come to you in desperation and with a brain that has become scrambled egg!!! Please someone, anyone out there! Help me Obi-wan Kenobi! You are my only hope!!! ? What I'm trying to achieve here in this Codepen is that there is no delay between the card animations. They all need to fire at the same time and be scrubbed by the ScrollTrigger which is setup where the main timeline duration is from when the top of the viewport enters the top of the section element and ends when the top of the viewport hits the bottom of the section element. Now, I think I would be able to get the math and logic correct, if I was working with a timeline that is fired once and then runs through and that my cards were static in terms of the project build and I could just use durations. However, this particular animation is proving troublesome for me to solve, in that it needs to be dynamic as in my current project I'm using VueJS to dynamically pull in the cards, which will be generated and injected from a CMS (Wordpress with ACF - Advanced Custom Fields) and then are styled and positioned in the layout using TailwindCSS. Here is my logic below, in a "Pseudo code" numbered list: I have an Array of elements. ScrollTrigger controls the animation timelines as I scroll from the top to the bottom of the the section element. 0% - Each card in that array needs to dynamically calculate where it is, relative to the centre of the viewport. This is also the case for the following keyframes after. 50% - Each card animates on the x-axis to where the centre of the card and the centre of the viewport intersect. 75% - In that last half (left half of viewport) the cards need to start alternating on their animation path on the y-axis and begin to rotate at random values from -360 to 360 degrees. 100% - Each card needs to have exited to the left from the viewport but it's right most edge will be flush to the outer left edge of the viewport. PS, I see @Carl is active on here sometimes... Thank you Sir, for your amazing endeavour with Creative Code Club. My lifetime membership purchase got me this far... I'm sure once I've finished all the courses, this will no longer be something I can't resolve on my own... but... DEADLINES are Looming. I'm certainly going to devour the rest of you awesome material because... it is so easy to follow and understand, and SO MUCH FUN to see what we can create with code! Deeper down the rabbit hole I shall dive! PPS, I also see @Cassie is the GSAP Super Boss Level 99 Hero... long time old friend ? fancy meeting you here! And that both our lives have led us down the path to becoming coders! Best decision of my life to leave behind the graphic design and advertising world and enter into logical creative problem solving with objective outcomes and goals ?, it looks like you are loving it too and shooting the lights out! That is so awesome to see! PPPS, I have a tendency to overcomplicate my logic and code (I am but still a Padawan Coder)... if you can show me a better way. Please do! I love to learn from the Jedi Coders! Please feel free to review the code here before you jump into the Codepen: function viewportWidth() { return window.innerWidth; } function randomRotate() { return Math.round(gsap.utils.random(-270, 270)); } function animateTitle() { const topTitle = document.getElementById('topTitle') const bottomTitle = document.getElementById('bottomTitle') let tl = gsap.timeline() tl.add('start') .to(topTitle, { x: -viewportWidth(), y: -viewportWidth() }, 'start') .to(bottomTitle, { x: -viewportWidth(), y: viewportWidth(), autoAlpha: 1 }, 'start') return tl } function animateCards() { const cards = document.querySelectorAll('#projects #card') let tl = gsap.timeline() let cardStart = [] let halfCardWidth = [] let viewportWidth = [] let viewportCenter = [] let cardToCenter = [] let cardToLeftQuarter = [] let cardOffScreen = [] let alternate = [] const yDirection = [-(window.innerWidth / 1.5), window.innerWidth / 1.5] cards.forEach(function(card, index) { halfCardWidth.push(document.getElementById('card').offsetWidth / 2) viewportWidth.push(window.innerWidth) viewportCenter.push(window.innerWidth / 2) cardStart.push(card.getBoundingClientRect().left + (window.scrollX || document.documentElement.scrollLeft || 0)) cardToCenter.push(cardStart[index] - viewportCenter[index] + halfCardWidth[index]) cardToLeftQuarter.push(cardToCenter[index] + (viewportCenter[index] / 2)) cardOffScreen.push( ( cardToCenter[index] + ( viewportCenter[index] / 2 ) ) + (viewportCenter[index] / 2) + halfCardWidth[index] ) alternate.push(index % 2) tl.to(card, { keyframes:{ '0%': {x: 0}, '50%': {x: -cardToCenter[index], y: 0, rotation: 0, ease: "linear", autoAlpha: 1}, '75': {x: -(cardToLeftQuarter[index]), y:yDirection[alternate[index]] / 2, rotation: randomRotate(), ease: "linear", autoAlpha: 1}, '100%': {x: -cardOffScreen[index], y:yDirection[alternate[index]] ,autoAlpha: 0} } }) return tl }) return tl } let masterTimeLine = gsap.timeline({ scrollTrigger: { trigger: document.getElementById('project-carousel'), start: 'top top', end: 'bottom top', scrub: true, pin: true, markers: {fontSize: "18px", fontWeight: "bold"}, } }) masterTimeLine.add('start') .add(animateTitle(), 'start') .add(animateCards(), 'start')