Jump to content
GreenSock

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

tailbreezy last won the day on February 25 2021

tailbreezy had the most liked content!

tailbreezy

ShockinglyGreen
  • Posts

    206
  • Joined

  • Last visited

  • Days Won

    4

Community Answers

  1. tailbreezy's post in Creating smooth scaling with scrolltrigger was marked as the answer   
    Hello there,
     
    This issue probably has to do with your anchors placement or having too short of end value in scrollTrigger.
     

    See the Pen 72901772ab1a6bc88593420b9d704353?editors=1010 by dadacoded (@dadacoded) on CodePen
  2. tailbreezy's post in Width and height check in ScrollTrigger.matchMedia() was marked as the answer   
    Hello,
     
    It uses the css @media syntax:
     
    "(min-width: 800px) and (min-height: 800px)": function() {}  
  3. tailbreezy's post in SVG Foreach random order was marked as the answer   
    Hello,
     
    You can use one of gsap utilities.
     
    let flower = gsap.utils.toArray(".flower"); let shuffled = gsap.utils.shuffle(flower) ... shuffled.forEach(item => { let stempath = item.querySelector(".stem"); ...  
  4. tailbreezy's post in Freeze the section on scroll and then scroll the background image was marked as the answer   
    Here is one more option using backgroundPosition instead.
     

    See the Pen d14a7a2ce121e939a7728edf729768c4 by dadacoded (@dadacoded) on CodePen
  5. tailbreezy's post in Button won't open div in browser? was marked as the answer   
    How about these ways.
     

    See the Pen 6d1c36c29ebb353ef0a6fcfc72f7fef7 by dadacoded (@dadacoded) on CodePen
  6. tailbreezy's post in Full-width carousel wrap breaks on resize was marked as the answer   
    var colors = ["#f38630","#6fb936", "#ccc", "#6fb936"]; //initially colorize each box and position in a row function setup() { gsap.killTweensOf('.box'); gsap.set(".box", { backgroundColor: (i) => colors[i % colors.length], x: (i) => i * window.innerWidth / 4 }); gsap.to(".box", { duration: 40, ease: "none", x: `+=${2 * window.innerWidth}`, //move each box 500px to right modifiers: { x: gsap.utils.unitize(x => parseFloat(x) % (2 * window.innerWidth)) //force x value to be between 0 and 500 using modulus }, repeat: -1 }); } setup() window.addEventListener('resize', setup)  
    Have you tried to kill off the tweens of ".box" before rebuilding.
    Apart from the obvious full rebuild.
     
    Maybe also set the duration to more flexible value, so as to keep the relative speed when sizing down.
    For example, this code speeds it up when resizing down.
     
    duration: innerWidth / 30,  
  7. tailbreezy's post in Multiple animations on the same Object is creating issues was marked as the answer   
    tl.to( smileyface, { duration: .5, y: -150, ease: "back.inOut(1.7)", onReverseComplete() { idle.resume() }, onStart() { idle.pause() } }); tl.to( bubble, { duration: .4, opacity: 1, scale:1, transformOrigin: '80% 80%', ease: "back.inOut(1.7)" }, "-=0.3"); container.addEventListener("mouseenter", function(){ tl.play(); }); container.addEventListener("mouseleave", function(){ tl.reverse() });  
    Just noticed the .then call. First time I see one. So I removed it  
    I have also added onStart and onReverseComplete and the glitch seems to have resolved,  at least I cannot trigger it.
    I will go mad if I keep popping those bees, so check for yourself to see if it is good now.
     
    Also the more pronounced movements surely did help to spot the issue.
  8. tailbreezy's post in ScrollTrigger|Timelime was marked as the answer   
    Here is the pen from the video, in case you want to deconstruct it.
    Basically ScrollTrigger is scrubbing through the whole animation one tween at a time, since there are no overlaps set.
     

    See the Pen qBdzqmR by GreenSock (@GreenSock) on CodePen
     
  9. tailbreezy's post in Grapping icon WHILE the user grabs and holds an image was marked as the answer   
    Maybe something as simple as that.
     

    See the Pen 0c4313a6ba4654d309899fa967c91102 by dadacoded (@dadacoded) on CodePen
  10. tailbreezy's post in Scrolltrigger timeline + forEach was marked as the answer   
    Just change your trigger and you are good to go. Also you will need some height/spacer at the end because you will not be able to reach the last trigger.
     
    trigger: item  
  11. tailbreezy's post in Timeline inside loop causing stagger was marked as the answer   
    for (const box of boxes) { timeline.to(box, { x: 200, },0) timeline.to(box, { y: Math.floor(Math.random() * (50 - 10 + 1) + 10), },'>') }  
    Not sure what you are after but if you want all the boxes to move simultaneously on the X and then simultaneously on the y.
     
    Also, if you additionally want to match timeline2, you can add a label to master and attach timeline2 there.
    const master = gsap.timeline() master.add('tlStart'); master.add(functionOne()) master.add(functionTwo(),'tlStart')  

    See the Pen 86f651c2adbbc6202d5ac7f8d1d944c8 by dadacoded (@dadacoded) on CodePen
  12. tailbreezy's post in Slow scrolltrigger animation was marked as the answer   
    A few things.
     
    Moving your .para xPercent:100, moves it to the right by the value in offsetWidth which about 8000px.
    Instead you can position it with left: "100%" to be right after the right edge — making it start immediately upon entering the trigger.
     
    Additionally, if you want the animation to happen naturally you can to add that value (8000px) to the end marker of ScrollTrigger.
     

    See the Pen 5536b576f1bf00911ee64c4f7e7c65b9 by dadacoded (@dadacoded) on CodePen
  13. tailbreezy's post in animation trigger with a delay was marked as the answer   
    secAbtTl .from( ".sec-about-presentation h1", { // yPercent: 100, opacity: 0, stagger: 0.1 }, "<0.5" )  
    "<0.5"
    This adds 0.5 delay at the start of the tween.
  14. tailbreezy's post in gsap + ScrollTrigger - dynamic end triggers and tween dependencies was marked as the answer   
    There are so many ways to achieve this.
    On top of my mind is this padding-bottom/padding-top hack.
     

    See the Pen 4276699bb20421d490ac62763aea9d95 by dadacoded (@dadacoded) on CodePen
  15. tailbreezy's post in Staggered fade in was marked as the answer   
    These staggers that happen near to each other time-wise are a job for ScrollTrigger.batch
    It essentially triggers them in close proximity to each other.
     
    You can read up on the method in the docs. It is quite extensive and thorough.
    https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()
     
    Additionally, you can also add back onLeave and onEnterBack as in the docs, if you want to re-trigger the first batch as well.
     

    See the Pen 94b47a1c756f829787ed27e177cd0b36 by dadacoded (@dadacoded) on CodePen
  16. tailbreezy's post in Bring height from top and than remove height but it should animate to bottom was marked as the answer   

    See the Pen a857e4688b781736144d36ef485d3a3c?editors=0110 by dadacoded (@dadacoded) on CodePen
  17. tailbreezy's post in scrub issue was marked as the answer   
    Hello guys,
     
    I stumbled upon a surprising problem with scrub.
    When I scrub the animation plays to maybe variable progress values depending on viewport height, but never to progress(1).
    Solved it.
    Turns out scrub is totally dependent on having end value set on your ScrollTrigger and you get weird results when not setting one.
  18. tailbreezy's post in moJS ease curves applied to GSAP html element was marked as the answer   
    Wow. Would have never thought of this.
×