Jump to content
GreenSock

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

Leaderboard

  1. ZachSaucier

    ZachSaucier

    Administrators


    • Points

      335

    • Content Count

      5,113


  2. akapowl

    akapowl

    Moderators


    • Points

      308

    • Content Count

      217


  3. GreenSock

    GreenSock

    Administrators


    • Points

      272

    • Content Count

      15,241


  4. PointC

    PointC

    Moderators


    • Points

      139

    • Content Count

      3,992



Popular Content

Showing content with the highest reputation since 08/28/2020 in all areas

  1. 9 points
    Conventional wisdom says that kilobytes have a direct impact on load times and consequently user experience. Too many developers, however, myopically focus on a simplistic (and rather dated) "aggregate total file size" mentality and completely miss the broader goal of improving user experience. This article aims to challenge the old paradigm and explain why "spending" kilobytes on a library like GSAP can be a very smart move. Kilobyte cost factors When you're assessing kilobyte cost in a modern, nuanced way consider these factors: Performance yield Some kilobytes are "cheap" in terms of the initial load but expensive for runtime execution. If our goal is better user experience, this is critical. Would you rather a page that loads 200ms faster with janky animations or one that's super-smooth at runtime but takes a fraction of a second longer to load? Of course there are reasonable limits either way (waiting an extra 30 seconds for a huge file to load would be intolerable even if it made things run buttery smooth), but in most cases we're only talking about fractions of a second difference. For example, GSAP contains "extra" code that automatically GPU-accelerates transforms, applies lag smoothing, avoids layout thrashing, caches important values for super-fast lookups, etc. - would removing those features for the sake of a few milliseconds on initial load (and zero savings once it's cached) be a step forward or backward? Caching When does a 23kb file act like a 0kb file? When it's cached! This is particularly relevant for engaging, animated sites because there are common tasks and code that can be encapsulated and shared. GSAP is a perfect example of a shared resource. An end user only loads it once and then it's completely "free" thereafter...for all pages pointing at that file...on all sites*! *Some browsers may implement domain-specific caching. CDN files loaded from a CDN (Content Delivery Network) are typically "faster" because they're geographically distributed and automatically loaded from the closest server. Plus CDNs have inherent redundancies leading to better reliability. Custom code reduction (kb savings) Loading a library like GSAP may allow you to only write 1kb of custom animation code instead of 5kb of CSS animation code, for example. Plus it has quite a few utility methods that you can tap into for added savings. This can significantly reduce the amount of custom code that must be loaded as your visitors go page-to-page. Non-kilobyte costs If you avoid a tried-and-true library like GSAP, it may feel like you're reducing your costs but don't forget: Development time You could use a minimalistic library or write your own, but how much more time will that take to implement? How much more custom code will it require? How many workarounds will be required to get similar functionality? How many headaches will you run into with cross-browser quirks and inconsistencies that GSAP already solved? GSAP's API has been crafted over a decade to facilitate easy experimentation with minimal code. And when it comes to animation, experimentation is key. Most developers are working against deadlines and it's priceless to have a robust, vetted toolset to rely on. Swagger & confidence Perhaps at the outset your project only has basic animation needs so you choose a basic animation library or write your own custom code for all the animations...but what happens when the client requests something more advanced? Uh oh. Will you port everything to GSAP then? What if you've got hundreds of animations that now need to be dynamically time-scaled or linked to scroll position with smooth scrubbing? How about advanced morphing? If you just use GSAP from the start, you have almost zero risk of running into an "oh no!" moment like that. You can code with confidence that you'll be able to animate pretty much anything with minimal code. What is that kind of developer swagger worth? Documentation, support & training What if you run into trouble? Is excellent documentation available? Is there a community eager to help? Are there training resources for new hires down the road? What's the real long-term impact of your choice? Maintenance The web is littered with abandoned open source projects. What's the track record of the one you're considering? How long has it been actively developed? Or if you're writing all your own animation code from scratch, is it truly maintainable? What's the long-term cost? Are you documenting how everything works? What happens when browsers introduce bugs or new features that impact animations? Other factors to consider Bandwidth is only increasing The impact of a 23kb library is decreasing all the time. It's less than a single image these days. On average, in fact, images account for over 864kb on every web page! And again, GSAP is a one-time load in most cases. It's often cached in which case it costs nothing. GSAP doesn't count against file size budgets on every major ad network They have virtually all recognized GSAP as an industry standard and exempted it from file size calculations. That directly benefits you if your animations are GSAP-based. Conclusion If you adopt the old mindset that's solely focused on the aggregate total file size for each page, it's easy to miscalculate the cost of using a library like GSAP (or any other shared resource). Doing so also pushes developers toward minimalistic less-capable solutions that may end up being far more expensive long-term. We'd encourage a more wholistic, nuanced approach that looks at the overall costs and benefits. Remember the end goals - outstanding user experience, minimal development costs, and long-term viability.
  2. 8 points
    Definitely don't know what you're asking, but if you're rotating an element, then getBoundingClientRect might not be the values you are expecting. This demo draws the coordinates of getBoundingClientRect around rotating elements. https://codepen.io/osublake/pen/wRvjJL If you're trying to do circle collision detection, that's super easy. Just compare the distance to the sum of the radii. https://codepen.io/osublake/pen/LYNLxYr
  3. 6 points
    As yourself and others have mentioned you can use libraries like Three.js, Pixi.js, Babylon.js, TWGL.js, Curtains.js, etc., etc. I suggest that you pick one, learn it and run with it. Let them do the heavy logic unless you are prepared to take a generalized deep dive and potentially reinvent the wheel. Either way there is gonna be a learning experience ahead of you. But in doing so it will open your possibilities for development and creativeness going forward. So don't get discouraged and press onward. The following tutorial might help you learn some things for the effect using Three.js, you may also find the site helpful overall. https://tympanus.net/codrops/2019/11/05/creative-webgl-image-transitions/ GSAP of course can animate most anything on its own. But if you were not aware GSAP has an official Pixi plugin and an unofficial plugin for Three.js. Each of those might help you at some point on your journey. Most of this topic however is beyond the direct scope of GSAP and this forum. If you have specific GSAP questions members are always of course happy to assist. You can also consider hiring someone through the Jobs & Freelance section if that would become necessary to achieve what you are after. You should now have plenty of materials that you can move forward with. Best wishes with your project also welcome to the forum. 😉
  4. 6 points
    ...unless you use Andreas Borgen's HyperMorph 3000™ 😋 https://codepen.io/Sphinxxxx/pen/pZQRGB Note: Just kidding - Not Mine - And Sorry for crashing the thread - but I had to 😁
  5. 5 points
    Another option would be to set the amount in the stagger object based on the array length. Something like this. https://codepen.io/PointC/pen/c912fe99013c47555e2b9a3b8c3a031e Happy tweening.
  6. 5 points
    Hey @Nine Maybe this example of staggers on codepen can get you going into the right direction https://codepen.io/GreenSock/pen/HxzEl If you want to repeat the animation infinitely after all pieces have animated, you could add a 'repeat: -1' to the tween.
  7. 5 points
    Well, you could also stick to your original start and end for the ScrollTriggers and just translate your card__inner up on the y-axis half the amount of its height, so in your case '-35vh'. I don't know if that is a perfect solution, but in your case it gives the desired result. https://codepen.io/akapowl/pen/RwavEay
  8. 5 points
    Hey @darkgr33n Since you are using a scrub-animation, the perception of its 'speed' depends on the duration of the ScrollTrigger - meaning the time between its start and end. You don't necessarily have to set the end of your ScrollTrigger to the containerRows.offsetHeight - you could vary on that a bit. Just setting the end to '+=1000%' for example, makes the scrubbed animation appear waaaay slower. You should be good to go, simply just adjusting that end to your liking https://codepen.io/akapowl/pen/LYNMjoq Does that help?
  9. 5 points
    Hey Kimberly and welcome to the GreenSock forums. It's not enough to just call .play(0) or .restart() after you kill a timeline. You should actually recreate the tweens inside of the timeline instead. A good way to do that is to use a function to create the timeline in the first place. Then after you kill it, you just call the function again. You can learn more about doing that in my article about animating efficiently. Side notes: It's best to use .addEventListener() instead of setting the direct callback so that your function doesn't get overwritten by something else. You're using the old GSAP formatting. We highly recommend using the improved GSAP 3 formatting. You're directly animating the transform property. We don't recommend that. Instead we recommend animating the more specific transform attributes that GSAP offers like the y property. You have hard coded position parameters for each tween in your timeline. While that's perfectly acceptable, it makes it harder to update and maintain. I highly recommend getting skilled with using relative offset position parameters so that it's easier to make adjustments with the timings of your animation. You can learn more about that in this post. Altogether I'd set it up along the lines of this: https://codepen.io/GreenSock/pen/WNwKmxQ?editors=0010
  10. 5 points
    If you only need to adjust a tween or timeline dependent on a certain breakpoint / viewport, you might want to consider checking for those breakpoints, instead of exchanging tweens/timelines on every resize-event. Maybe something like this https://codepen.io/akapowl/pen/eYZjpjr
  11. 5 points
    And If you want to also disable all window scroll when modal is open, might be a simpler way https://codepen.io/Visual-Q/pen/jOqxXQj
  12. 5 points
    Hey @Thomi Aditya Are you speaking of the white 'light-wave' sort of effect, when you scroll down one section from start? GSAP can and will be helpful, when wanting to animate effects like these, but straight up building that sort of effect is not what GSAP does/can do - it probably requires WebGL and probably a good knowledge of shaders, too. I think, they used three.js for the WebGL part on the site you provided the link to - and they do use GSAP, I don't know if they do for this animation in specific, though. But getting to an effect as such will not be trivial to wrap your head around. Maybe searching codepen for an effect similar to this and trying to understand what is done, could be a first step. Edit: Welcome to the forum by the way
  13. 5 points
    Hey @shikari - welcome to the forum. First off, I removed ScrollMagic from your pen, because it is not a Greensock product, you neither need nor use it in your pen, and it was throwing errors - also, you probably don't need jQuery in there, too. You could maybe set the scene like this ( I used a timeline here, not a single tween, like you did - might not be neccessary ) var tl = gsap.timeline({ paused: true }); tl .to(fullWidthPicture, { scale: 1.3, duration: 1.5, ease: "sine.inOut" } ) ; tl.reverse(1.5); on page load you reverse that timeline from its end, so it scale down from scale 1.3 to scale 1.0. Then with a timeout dependend on the duration of your tween, you could initiate the ScrollTrigger after that tween is done var timeout = gsap.delayedCall(1.5, function() { ScrollTrigger.create({ trigger: fullWidthPicture, toggleActions: "play none reverse none", markers: true, start: "0 50%", end: "100% 0%", scrub: 1, animation: tl, }); }); That results in this: https://codepen.io/akapowl/pen/yLOjEWo When you are in full-window mode, you'll notice, that when the ScrollTrigger is being initiated, the image will start to immediately scale up a bit again - that is, because the image has already passed the set start-point of the ScrollTrigger, thus the tween of it will be executed for the portion, that it is already past that start-point. Hope this is at least an inspiration for how you could set things up. Cheers. Paul
  14. 5 points
    I played around with it a bit more to make it more responsive to the different 'states', when entering/leaving. Ended up with this one-timeline solution - but what I'm doing there (for example getting the progress of the timeline) looks, like I might be overcomplicating things. It works as I expected, though. https://codepen.io/akapowl/pen/VwaxmYd
  15. 5 points
    Hey @maxshporto - welcome to the forum. I think, this is a sort of effect, that can be achieved in various different approaches. One of them could maybe look something like this https://codepen.io/akapowl/pen/LYNmZXp
  16. 5 points
    Hey @anomie - welcome! I can not tell you anything on the actual implementation, but ScrollTrigger.scrollerProxy() "Allows you to hijack the scrollTop and/or scrollLeft getters/setters for a particular scroller element so that you can implement things like smooth scrolling or other custom effects." https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() Maybe this might help. Note that .scrollerProxy() was added in v3.4.0 - so you'd have to update in your codepen.
  17. 5 points
    You're loop is running the same logic over and over. It will always be the condition of the last loop. You probably need to use a for loop with something like break or continue. See how I do it here. https://codepen.io/osublake/pen/ae04f1f23935e7d7a13c823d6141dec2
  18. 5 points
    If I'm understanding your issue I think you're looking for once: true not a toggle action. once: Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none".
  19. 5 points
    Hi @singlexyz, Creating this sort of animation in GSAP should be pretty straight forward. It's tough to break down with your codepen sample however, as it looks to me like you've got some thing in your CSS countering what you are trying to achieve in your animation (like adding object-fit and new image size parameters on click). I think the example you have setup is over-complicating things too. Is this what you're trying to achieve? https://codepen.io/ryan_labar/pen/rNezbgR
  20. 5 points
    Hey Christopher, here an example https://codepen.io/mikeK/pen/RwNKBrB?editors=0010 Happy drawing ... Mikel
  21. 5 points
    Hey madwhiffery. The post on StackOverflow already shows one solution so I'm curious why you're posting here. But I'm glad you did because we don't recommend setting transforms in CSS for elements being animated by GSAP Yes, this is because the transform is getting overwritten. See the most common GSAP mistakes for more info. Just set the offset using GSAP's xPercent and yPercent properties before animating: https://codepen.io/GreenSock/pen/gOrxWmv?editors=0010
  22. 5 points
    I am not sure, I really undertstand your question and what you want to achieve there. Can you maybe try and re-phrase your question? Or is this what you are trying to achieve? https://codepen.io/akapowl/pen/wvGeNBX If so, I do not see the need to use ScrollMagic here at all, since your animation is not dependent on scrolling what so ever. If you want to add scroll-based animation later on, it would be best to use GSAP's ScrollTrigger-Plugin then. https://greensock.com/docs/v3/Plugins/ScrollTrigger Besides that, there were a couple of issues with your code: At one point, you had a > too much in your HTML markup. Furthermore, you are trying to adress a '#count' in your js, which is not even in your HTML in the first place - there is only a div with a class of count. Also, I re-ordered the contents of your "gsap_loader" a bit, so you can tween the scaleX and not the width of your progressbar, and thus, be able to set the transformOrigin - which, as far as I know, is not possible for when you are tweening the width of an element. What you can and should always do, is really try and rule out all general errors in your HTML, CSS and JS first. I am sure, there might be a more elegant way to do this, too. Nevertheless, let me know, if this helps. Cheers, Paul
  23. 5 points
    Ah! I think the issue you were having was that you weren't setting or un-setting the opacity on the split characters, but rather the whole span of text, to easier target your splitText pieces in CSS you can set a classname via charsClass and target that. I also updated the pen's code to use the gsap3 syntax, instead of the outdated TweenMax syntax. https://codepen.io/ryan_labar/pen/bGpRNwY
  24. 4 points
    You could do several things: I might use an onComplete like this. However one other thing you need to consider is what happens if you scroll during the intitial animation, you would probably also want to be preventing window scroll during this time as well. Note: with the scroll disable on the window you don't have to wait to init the scrollTrigger timeline in the function but I showed it that way so you can see how it waits for the onComplete before the markers appear. https://codepen.io/Visual-Q/pen/JjXzGQL
  25. 4 points
    Hey @Narendra Verma That is because your ScrollTriggers are overlapping with tweens on the same elements. Both your ScrollTriggers, although they start at different points, end at the same point - thus you are creating conflicting tweens.
  26. 4 points
    Hey @Narendra Verma You could pin the 2. section and run a tween/timeline: https://codepen.io/mikeK/pen/NWNJWrX Happy tweening ... Mikel
  27. 4 points
    Hey @kylerumble, Here is an example with simple circles recommended by @Richard1604 https://codepen.io/mikeK/pen/XWdOvmd?editors=1010 Happy tweening ... Mikel
  28. 4 points
    Improved example of previous: This will prevent duplicated tweens being created if buttons are errantly clicked, and waits for end of current iteration on timeline before adding tweens, so you don't have to tell it to replay from start. https://codepen.io/Visual-Q/pen/RwaELbw
  29. 4 points
    Hey @Narendra Verma I'll rephrase my initial response: The main problem here is, that your ScrollTrigger has its trigger set to '#onscrollAnimatetext' - but nowhere in your HTML do you have an element with the ID of onscrollAnimatetext. It appears to be pinning, but I think that is only because of its 'position: sticky'. I set your trigger to '.onscrollAnimatetext', added a start and end to the ScrollTrigger and it works like a charm. https://codepen.io/akapowl/pen/gOrQaXQ Also, I removed the 'position: sticky' from your .verticalPanel, because I recall reading somewhere, that ScrollTrigger's pinning doesn't get along well with elements that have 'position: sticky' applied - but I am not 100% positive about that and would need confirmation from @GreenSock or @ZachSaucier on that one. (Edit: after doing some digging of my own, I am not sure, this is true at all) Go ahead and adjust the start and endpoint to your liking. Hope this helps. Cheers Paul
  30. 4 points
    That has nothing to do with GSAP (which is animating the values correctly) - sounds more like a browser rendering thing. I edited the SVG data to slap some extra [invisible] stuff on that path just to alter its bounding box and it seemed to work. I added "M950,300l200,100z" to the end of the "d" attribute. There's nothing magical about those values - I just chose some coordinates that'd be further off to the right. https://codepen.io/GreenSock/pen/bf6a874661d100f02a74bc6f9d0c5051?editors=0010 Does that help?
  31. 4 points
    Something like this maybe @GeS ? https://codepen.io/akapowl/pen/PoNBxaq
  32. 4 points
    Hey @Nekiy2 If you want to play different timelines that are tweening on the same element, for different window-sizes, and you want to make sure, that they respond to resizes, then yes, clearing or even killing the old timelines on resize and creating new timelines is the way to go. Your approach looks like its working well. And if @GreenSock already gave you advice on that, it's safe to say, that you can trust that advice. Based on that other thread, your setup could also look like this instead https://codepen.io/akapowl/pen/WNwKQbr
  33. 4 points
    Hey @ozcancelik, Welcome to the GreenSock Forum. Define a certain starting position of the ScrollTrigger. The default for type: "toggle" ScrollTriggers: "top bottom"; for type: "progress": "top center". https://codepen.io/mikeK/pen/abNGeKZ?editors=1010 Does it help? Happy twening ... Mikel
  34. 4 points
    Hey @artstyle This is a whole lot of code to process through. I found, that adding justify-content: center; in your CSS to '.section-wrapper .s5 .s5-wrapper' and removing the pin: true on your 'let s4_timeline2 = gsap.timeline ({ ... })' fixes the issues you have with the content of '.s5' overlapping the content of '.s4' when scrolling. Is this, what you were referring to? https://codepen.io/akapowl/pen/yLOjQKE You'll notice, that since .s5 is set to height: 100vh, the content will still be overlapping on small window-sizes, because the section simply is just not high enough, to contain the images, so they flow over.
  35. 4 points
    Hey @Richard1604 You could try the SVG filter feGaussianBlur. And then there are several posts about 'follow mouse' here in the forum. https://codepen.io/mikeK/pen/xxVjGaa happy tweening ... Mikel
  36. 4 points
    Coming to think of it again, maybe it's best to loop over the sections instead, and create a Scrolltrigger with that staggered timeline for each section. Added some more sections to show what I mean in this pen https://codepen.io/akapowl/pen/NWNyjpd I really hope, I am not overwhelming you at this point. 🙈
  37. 4 points
    Here's an example of animating SVGPoints. https://codepen.io/osublake/pen/7108c0f8dd0d32408ab3c7e5c93929ee
  38. 4 points
    gsap.registerPlugin(ScrollTrigger); var container = document.querySelector("#scroll-container"); var height; function setHeight() { height = container.clientHeight; document.body.style.height = height + "px"; } ScrollTrigger.addEventListener("refreshInit", setHeight); gsap.to(container, { y: () => -(height - document.documentElement.clientHeight), ease: "none", scrollTrigger: { trigger: document.body, start: "top top", end: "bottom bottom", scrub: 1, invalidateOnRefresh: true } }); Now, don't go thinking you can just copy this, paste on your project and it will magically work perfectly. You have to read this code, understand what it is doing and adapt it to your needs/page structure. GSAP is magical but it does not read minds.
  39. 4 points
    Hey @Zeyi, More suggestions: you could use linear or rotational morphs or custom origins and findMorphOrigin () - more here in the docs. Or you can partially open up the area so that the individual areas can be animated better. https://codepen.io/mikeK/pen/jOqYXrE https://codepen.io/mikeK/pen/bGpaOYG Happy morphing ... Mikel
  40. 4 points
    Hi mary, welcome to the club, i'm sure that you will enjoy it. Here is a very simple example of a stretch along the x axis with a scroll in the y direction. You can also pin, scrub or do a horizontal scroll if that's what you are looking for. https://codepen.io/rb1604/pen/qBZpMXo oh, btw if you want elastic then try adding one of the eases to the animation or even create your own custom ease as described in the documentation and learning center.
  41. 4 points
    Hey @Chris_Melich That is because you are trigerring both tweens for each element. You'd have to change your JS up a bit, so you trigger only the animation with its neccessary values that you want to animate. I tweeked things a bit in the following pen. Just one possible solution to this. https://codepen.io/akapowl/pen/xxVPxvY Hope this helps. Cheers, Paul
  42. 4 points
    If your font-size is always dependent on the viewport-width, you could set the x-translation up with function-based values, like maybe so: var enterIntro = gsap.timeline({ paused: true }); enterIntro .to(".h14", { delay: 0.5, duration: 5, scale: 500, x: () => ( window.innerWidth*0.05 * 160 ), ease: "power1.inOut"}) ; If this only runs once, when the window is loaded, as loaders usually do, you wouldn't even have to worry about resizing. But if you wanted to take resizes into account, you'd have to set up a resize-function, where you kill the old timeline and set up a new one everytime the browser is being resized - maybe somehat similar to what i did in the startTL-function that fires the timeline on click of that button in the following pen: https://codepen.io/akapowl/pen/NWNaQej I am pretty sure, there probably is a more sophisticated way to this. But I think to a certain degree the example in the pen works pretty well. Edit: If at one point - let's say below 800px window-width - your font-size is going to stay the same (40px in the following pen), you could adress this by using a window.matchMedia query and say that below that width the x-value needs to be a specific number catering to that fixed font-size, maybe like so: var lowWidth = window.matchMedia("(max-width: 800px)"); var enterIntro = gsap.timeline({ paused: true }); enterIntro .to(".h14", { delay: 0.5, duration: 5, scale: 500, x: () => lowWidth.matches ? 6500 : ( window.innerWidth*0.05 * 160 ) , ease: "power1.inOut"}) ; See this pen: https://codepen.io/akapowl/pen/ExKbYZB
  43. 4 points
    Hey @emjay This probably is because you are using .from-tweens in your timeline and the way GSAP handles the values of those when setting them up. You could prevent that behaviour, you are experiencing, by first setting up the initial state of your elements with GSAP like so gsap.set(next.find("a"), { scale: 3, y: -100, autoAlpha: 0 }) gsap.set(next.find("span"), { y: 10, autoAlpha: 0 }) and then in your timeline using .to-tweens instead intro .to(next.find("a"), { duration: 1, scale: 1, y: 0, autoAlpha: 1 }) .to(next.find("span"), { y: 0, autoAlpha: 1 }) .to(next.find("span"), { delay: 0.5, y: 10, autoAlpha: 0 }) ; The same for your hover-function/timeline nextHoverTl.to(next.find("span"), { duration: 0.2, y: 0, autoAlpha: 1 }); Also, I would apply the hover-functionality in an onComplete-function of that last tween in your intro-timeline - this way, hovering the element won't interfere, while the intro-timeline is still playing. Something like this: intro .to(next.find("a"), { duration: 1, scale: 1, y: 0, autoAlpha: 1 }) .to(next.find("span"), { y: 0, autoAlpha: 1 }) .to(next.find("span"), { delay: 0.5, y: 10, autoAlpha: 0, onComplete: function() { next.on("mouseover", "a", function () { nextHoverTl.play(); }).on("mouseout", function () { nextHoverTl.reverse(); }); } }) ; And here is an actual pen, to show, that this works as probably intended. https://codepen.io/akapowl/pen/BaKwXYz Hope this helped a bit. Cheers, Paul
  44. 4 points
    Hey @bennyboy1978 At the same time you animate the scale of the .h14, you could animate it's position on the x-axis to get the desired result. Check this pen: https://codepen.io/akapowl/pen/ExKwqYo I also set the overflow of your loader to hidden, otherwise the scrollbars would go crazy because the h14 takes up a lot of space on the page when scaled up that high. Hope this helps. Cheers, Paul Edit: If you want to reveal the actual content underneath when it's done, you could then e.g. in an onComplete-function tween the autoAlpha of the loader to 0 like this: https://codepen.io/akapowl/pen/GRZMVmR
  45. 4 points
    Don't worry too much about it. Just do what I do right before someone sees my work.
  46. 4 points
    Here's an example using v2. Shouldn't be too hard to convert to v3. https://codepen.io/osublake/pen/xYMeKP
  47. 4 points
    Ok, I have just tried to use the saveStyles and it does the trick. ScrollTrigger.saveStyles(".next-post"); This will save the styles of .next-post (no inline styles) and revert back to this, when the user resizes back to a large breakpoint. Updated demos is here: https://codepen.io/ihatetomatoes/pen/VwaWojw
  48. 4 points
    Since you want the 'paralax-animation' of that blue heptagon to start at a different point (when its center hits the center of the screen) than the pinning of the paralaxContainer (when its top hits the top of the screen), creating one ScrollTrigger for each of these is one way to go here, just as @ZachSaucier had already pointed to, when he said: The different end point is to be explained like this: Since the ScrollTrigger for the blue hexagon starts half of the viewport-height before the other ScrollTrigger, I wanted to set the endpoint of it, so it ends exactly at the same time, when the pinning ScrollTrigger does. Actually I set it wrong there. It is supposed to be end: "+=" + ( 2000 + window.innerHeight/2 - 50 ) with 50 being half the height of your blue heptagon ( because the start is set to when its center hits the center of the screen). If it was set to end: "+=2000", it would simply just end 2000px after it had started. In your case it doesn't really matter that much though, since you are translating it 2000px upwards, thus it will be out of sight pretty quick, and you won't even notice, when the ScrollTrigger stops. I made an edit of my former pen where the translation is set to the x-axis, so (on full-screen in debug mode) you can see, where exactly the animation of the blue heptagon ends. You can fork it yourself and play withe the different end-values there, to see, how they affect the blue heptagon ( also see different positions of the markers ). https://codepen.io/akapowl/pen/jOqweeO Hope this makes things a bit clearer to you. Cheers Paul
  49. 4 points
    Good work, I think you've got the basic techniques! If you want to get it exactly the same you'll just have to break down exactly what the sequence and rotation timings the css is executing. Gsap should certainly allow you to reproduce it. The methods of sequencing and syntax are a little different from gsap structure so you just have to be patient and work it out. You'll learn a lot in the process. Happy Tweening!
  50. 4 points
    Hi, Fun little experiment: https://codepen.io/rhernando/pen/gOrWQrY?editors=1010 Now, honestly I don't know if I'd include Alpine among my go-to libraries right now. As you can see the code is quite simple and nothing that can't be done with vanilla JS. Sure you don't have to get the elements from the DOM and there is some degree of encapsulation thanks to the x-data directive which allows you to initialize different components in your HTML, which is something nice, so maybe for something really small or perhaps using some sort of agnostic templating library, this proves handy. Although I'm missing a method/hook in order to create the GSAP instance (or do those type of operations), kind of what x-init does but with access to the component's state. I guess I'm too used to libraries and frameworks such as Vue, React, etc. Happy Tweening!!!
×