ddi-web-team

Is the weird shape being caused by your border radius not being updated? If you want your corners to be similar on the shape when it's larger, you need to lower the border radius set in your css. I added another tween to your timeline and fixed this issue. .to(floatingContact, {borderRadius: '2px'}, 0)

I don't think scrollTrigger was the problem. The main difference between our code is I'm looping through every 'stat' inside the node list and applying a tween to it. Your original code is applying a single tween to a node list. Not even sure if that works. I updated my example to have scrollTrigger so it more closely matches your original intent.

Is this what you're looking for? https://codepen.io/DDI-Web-Team/pen/wvjzNEm/d87d5a5aa0dddcde12ddc5d7deb87404?editors=1111 const stats = document.querySelectorAll('div > h3 > span'); for (const stat of stats){ gsap.to(stat, {innerText: stat.dataset.value, snap:{innerText:stat.dataset.interval}, duration:3}) }

Hi @Cassie Thanks for the suggestion. This definitely got me closer to what I was chasing. But I was still having issues so I went back to the drawing board and updated my approach on both the shapes and the master timeline. It's much more organized and easy to work with now. Thanks for the help! The gsap team is the best.

Hello all, I'm using EaselJS to attempt a cool animation concept. I have it mostly working but there's just a small timing issue that I'm just missing. I've created 5 shapes in EaselJS and I'm animating their x, y, and alpha properties with a gsap timeline. The first run through, everything plays perfectly. But upon repeats, it speeds up. It's like it's not respecting the delay before reversing after playing the animation full through once. You can see in my demo that it cycles through the images properly (It's just a proof of concept so I only have 2 slides). Any insight would be greatly appreciated.

While I do really like the @PointC solution (and your website. Thank you so much for the content) I feel like .wrap() was made for this! Thank you so much! ?

Hi all I decided to have some fun with the codepen challenge and utilize my favorite library ? One thing I decided to do was create an array of colors that I could loop through and set the color of each character in the caption of the photo. I got this working properly using the following: const captions = gsap.utils.toArray('figure > figcaption'); const colors = ['#ffadad', '#ffd6a5', '#fdffb6', '#caffbf', '#9bf6ff', '#a0c4ff', '#ffc6ff'] captions.forEach(caption => { mySplit = new SplitText(caption); let counter = 0; for(const char in mySplit.chars){ if(counter > 6){ counter = 0; } gsap.set(mySplit.chars[char], {'color': colors[counter]}); counter++; } }); My only question is this. Is there a more elegant way? I've read through the gsap utilities and I'm failing to come up with a way to do this in a more concise way. Thank you!

I realized that my issue was because of conflicting tweens. In the closing function, I was changing the opacity of the card being flipped before it had a chance to finish it's animation. I've updated the function like this. function closeHeadshot(){ document.removeEventListener('click', closeHeadshot); //Record current state const state = Flip.getState(expandedContainer); //Scale details down so that it's image fits exactly on top of the active headshot Flip.fit(expandedContainer, activeHeadshot.querySelector('img'), {scale: true, fitChild: expandedImage}); //Put the bio container back and then fade in the other headshots const tl = gsap.timeline(); tl.to(expandedBioContainer, {xPercent: 15, opacity: 0}) //.to(expandedContainer, {visibility: 'hidden'}) .to(headshots, {opacity:1, stagger: {amount: 0.7, from: headshots.indexOf(activeHeadshot), grid: 'auto'}}, 0); Flip.from(state, { scale: true, duration: .5, delay: 0.2, ease: "power2.inOut", absolute: true }).to(expandedContainer, {visibility: 'hidden'}) activeHeadshot = null; }

Hello. I'm trying to make my own flip demo that is very similar to this example. https://codepen.io/GreenSock/pen/JjXqMZK The issue that I'm coming across is with the closeHeadshot() function. When closing, the expanded headshot starts to move back into the correct place, but near the end, it jumps back to place and doesn't animate nicely. I'm not sure what's causing this and why it doesn't close as smoothly as it opens.

Hi Jack! ? Yes, you hit the nail on the head. I hadn't really considered how the z-index was causing this. Your solution is perfect. Thank you so much!

Hi all I'm trying to create a 2x2 grid of divs. When a div is clicked it will fill up the entire container of divs and reveal some content. I have this working using the FLIP plugin, but I'm noticing a weird jump when downsizing every box with the last one being an exception. For some reason, the last one (the orange box) grows and shrinks as intended. I'm achieving this by using unset on the class that is being applied to the box that is full screen. .fullScreened{ position:absolute; top:0; bottom:0; right:0; left:0; z-index: 10; grid-column-start:unset !important; grid-column-end:unset !important; grid-row-start:unset !important; grid-row-end:unset !important; } Which feels kind of hacky but I'm not sure of another solution.

That's a fair point @mattsrinc and I'll look over it for sure.

Wow. That seems so obvious I almost feel embarrassed. Thank you @ZachSaucier Your help is very much appreciated.

Hello All I'm trying to create a very large documentation page. Because I know this page can get very long, I'm using scrollTrigger to Animate a progress bar. That code is basically copy/pasta from the scrollTrigger examples. Thank you ? Tween an icon next to the nav item that tells the user what section they are in. This works perfectly fine with scrolling. And now I'm trying to use the ScrollToPlugin so that when the user clicks on a nav item, the window tweens to the correct position. It seems to work perfectly fine if you are at the top of the page, and click on any nav item. But if you're clicking on a nav section when you're scrolled, the plugin seems to 'jump' the window to the top of the page before tweening to the correct position. I tried googling this issue and did come across this where @OSUblake helpfully suggests removing smooth scrolling. I thought this would solve my issue as I did have that enabled. However, I'm still seeing the behavior after removing that. Any help would be greatly appreciated.

D'oh. Thanks @ZachSaucier!