Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Everything posted by ddi-web-team

  1. 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! 🙂
  2. 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!
  3. 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; }
  4. 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.
  5. 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!
  6. 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.
  7. That's a fair point @mattsrinc and I'll look over it for sure.
  8. Wow. That seems so obvious I almost feel embarrassed. Thank you @ZachSaucier Your help is very much appreciated.
  9. 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.
  10. Hello I'm working on a chart animation that uses a from tween to animate the bars from an opacity of 0 and a y coordinate of -50. Because this animation is further down the page, I'm using scrollTrigger so the user doesn't miss the animation. The issue that I'm seeing to run in to is how scrollTrigger works in relation to nested timelines. I have a master timeline called globalTL const globalTL = gsap.timeline(); I have multiple functions that each return a timeline. function animateIntro(){ let tl = gsap.timeline(); var staggersX = gsap.utils.wrap(['-200', '200']); tl.set('.section', {autoAlpha:1}) .from('#intro-logo', {opacity:0, y:-100}) .from('#intro-tagline', {opacity:0, y:100}, '<') .from('.yellow-card', {opacity:0, x:staggersX, stagger:.3}) .from('.keep-scrolling-container', {opacity:0, delay:.5}) .fromTo('.container-outter', {background:'#236192'},{background:'#eee', scrollTrigger:{ trigger: '.finding1', start: 'top center', end: 'center center', scrub: 1, //markers: true }}) return tl; } function animateFinding1(){ const bars = document.querySelectorAll('#chart-container > div'); console.log(bars) let tl = gsap.timeline({scrollTrigger:{ trigger:'#chart-container', start:'center center', markers:true }}); tl.from(bars, {opacity:0, duration:1, stagger:.25, y:-50}) return tl; //THIS CAUSES ME TO BREAK } Finally, I add these to the master timeline. globalTL.add(animateIntro()) .add(animateFinding1(), '<') The problem with this approach is that it causes my chart to animate inconsistently. Sometimes the animation doesn't completely finish. Sometimes it never even starts. When it does finish, it goes to the complete state immediately. There's no actual tweening of the values. The solution seems to be to remove the return statement from animateFinding1() function animateFinding1(){ const bars = document.querySelectorAll('#chart-container > div'); console.log(bars) let tl = gsap.timeline({scrollTrigger:{ trigger:'#chart-container', start:'center center', markers:true }}); tl.from(bars, {opacity:0, duration:1, stagger:.25, y:-50}) //return tl; //I'm commented out. Everything is fine now. } I don't really understand why this is the case. I've tried adding the scrollTrigger to the from tween rather than the timeline. My normal workflow is to create a master timeline, create functions that create and return timelines, and finally to nest those timelines in the master using those functions. Is there something I need to consider when using this workflow with scrollTrigger? Is there some obvious fluke I'm missing? Thank you for reading.
  11. Amazing. Thank you @ZachSaucier 😁 One quick question. You mention that transforms are more performant than height. Do you have a resource where I can learn more about why this is?
  12. Hi all! I've been experimenting with combining D3 and GSAP to animate some nice looking charts. I created a vertical bar chart that GSAP has no problem animating as D3 returns plain SVG. The issue is coming from how these rects are being 'drawn' in. It's from the top. I tried changing the transformOrigin but it doesn't seem to be affecting anything.
  13. You won't regret it. Yeah I kind of figured as much. Doing it in a small container was more about trying to wrap my head around the logic before going to canvas as I'm not super familiar with it. Thank you so much. This is awesome. I'm going to really dig into this because it's such a neat effect. Finally, oof, rookie mistake. I'm so used to using jquery that when I don't use it I make silly mistakes. Thanks for looking out!
  14. Hello all. First of all, I want to emphasize that this project is purely for practice purposes. I'm trying to get better at GSAP so any suggestions at all to improve my code or approach to this problem in any way are welcome. I was inspired by the level change screen of the video game, Just Shapes & Beats. If you're not sure what this is, check out this video. I made sure to time stamp it so it starts at the exact point it happens. I wanted to try to recreate this. To start, I programmatically generate 100 divs, attach event listeners to them, and use flex to space them out evenly. When a box is clicked, I use two arrays to separate the boxes that are above and below the target. Once I have those arrays, I loop through them and create a tween for each one that gets added to a timeline. Once that's done, I play the timeline. Here's the problem I'm running into. Because I'm creating tweens for every item in the array, I don't really know how to stagger them. I can't just use a class, because that would target all of them and they need to animate differently based off if they are above or below where the user clicked. I tried adding a delay to each tween, but the problem with that approach is when the animation for the blocks above the user click happens, the last block is delayed the greatest which is the opposite of what I want. That's my specific problem. But again, if you just have any general suggestions for a better way to approach this, I'd love to hear it. I'm still very much in the beginner stages of GSAP. Thank you. Edit --- Here is a debug link. It seems to show the animation better than the preview window inside codepen. https://cdpn.io/DDI-Web-Team/debug/06180d06502c57364e0a0f3ae563e79f
  15. - @akapowl Is there a preference here if we're ultra concerned about performance? I would assume that clearing a timeline and then adding in new tweens is more efficient than killing it completely.
  16. I apologize if this is not the place for this but I did notice something in the documentation that seems wrong. If you scroll down to the 'Challenge: Animate SVG attributes like cx, cy, radius, width, etc.' header, you'll see that one of the code examples doesn't seem to be displaying correctly. It just displays instead of having an SVG element.
  17. Hi all I'm attempting to create a concept where you hover over an area, which causes an animation on a font awesome icon inside that div, and reveals a separate div below. The concept works on my codepen example. The problem that I'm running into is that it reveals the new content div before the previous one has been removed. If you run your mouse over all 5 containers quickly, all 5 content areas display at once before they are removed. I'm not really sure how to go about fixing this. Any direction would be appreciated.
  18. Hi @ZachSaucier That worked like a charm. Thank you. I wasn't aware that ScrollTrigger added a container to the DOM. Learned something new.
  19. I love the example of the layered pinning example using scroll trigger that the Green Sock account made https://codepen.io/GreenSock/pen/BaowPwo and I wanted to use this concept to create a timeline for my company. I have the concept working but something that I realized is that scrolling fatigue might set in because it's a large timeline. The solution that I came up with was a 'controller' that would be pinned to the side that would contain anchors to the decades of the company's history. I use jquery to scroll to the container that is the trigger for the scrollTrigger. $('html, body').animate({ scrollTop: $('#container1').offset().top }) This works if you're viewport is above a decade and you click on the controller. But if you're already past a certain decade and use the controller, it does take you to the correct container, but the animation is already played out. I thought the solution would be to reset the specific timeline that controlled the decade you were scrolling to, but that didn't work. _70s.on('click', function(event){ event.preventDefault(); //This is what I tried. Trying .invalidate() breaks the animation completely tl1.restart(); $('html, body').animate({ scrollTop: $('#container1').offset().top }) }) But this doesn't work. The animation is still at the end. I thought maybe invalidate() was what I needed but that completely broke the animation. Any help would be greatly appreciated. And thanks for the scroll trigger plugin. It's been a lot of fun to use.
  20. I'd be interested in stagger for scroll trigger. Good suggestion Yannis.
  21. No hassle at all. I'm glad that I could help 😁
  22. I'm having trouble getting the new Scroll Trigger plugin working in IE11. I can recreate the issue in a codepen. I provided the default URL, but to see the issue properly, you'll need to look at debug view as that's the only view that works properly with IE11. https://cdpn.io/DDI-Web-Team/debug/ef47361ba478799899683f07f3aaf0ae If you look at the console in IE11 it says Invalid property scrollTrigger set to .logo Missing plugin? gsap.registerPlugin() But this isn't an issue in newer browsers. It seems like it does actually do the animation. But it does it on load. Edit - GSAP provided a fix below. I've updated the codepen to reflect the workaround. Leaving up the codepen for anyone that might stumble across it with a search engine query.