Jump to content
GreenSock

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

Carl last won the day on March 17

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,583
  • Joined

  • Last visited

  • Days Won

    538

Community Answers

  1. Carl's post in Scroll Trigger Timeline without Sequencing was marked as the answer   
    give all the tweens a position parameter of 0. if you need more help please provide a minimal demo so we have some idea of what your code looks like and what you are trying to do. thx.
  2. Carl's post in ScrollTrigger pinned animation was marked as the answer   
    Hi
     
    Thanks for the demo. It's always good to start with small examples like this. Good job!
     
    I think you are just looking for scrub:true
     

    See the Pen dyJjEwK?editors=0010 by snorkltv (@snorkltv) on CodePen
     
    Hopefully this helps
  3. Carl's post in How to add easing and change duration was marked as the answer   
    As noted previously the speed is going to all be determined by
    how fast user scrolls how large the scroll area is (determined by position of end markers) the relative durations of all the animations to each other another factor is easing on the individual animations. I added a power3.in ease to the large circle growing. this means it will scale at a slower rate at the beginning, but of course if the user scrolls super fast... it will still be super fast.
     

    See the Pen NWXYzZv?editors=1010 by snorkltv (@snorkltv) on CodePen
     
    Also consider that on a large screen the circle has to grow bigger than it would on a small screen in the same amount time also lending itself to grow faster.
     
    Glad you were able to find this demo helpful. It's from my course ScrollTrigger Express, packed with over 25 lessons to help folks better understand how ScrollTrigger works and avoid the issues that commonly drive them to the forums. If you are just starting with ScrollTrigger I think you'll find it a tremendous help.
     
    The mix-blend-mode works nicely to fill the text, but If you want to really replicate the effect you referenced with the color changing (black and white) check out @PointC's tutorial on svg masking
     
    https://www.motiontricks.com/invert-svg-text-with-a-mask/
     
     
  4. Carl's post in SplitText responsive - howto revert()? was marked as the answer   
    Hi @Patte welcome to the forums,
    Thanks for the demo. 
    This ended up being an interesting challenge for me that I could not easily solve. 
     
    A few things to consider
    With text split into lines it is going to need to be split differently for various screen widths. If we use batch() the number of items to be animated is going to change as the screen width changes Text that is split is going to need to be reverted and resplit every time a resize occurs ScrollTriggers are going to need to be completely cleared out or rebuilt every time a resize occurs I thought the solution would lie in tapping into onRefresh. However onRefresh happens on initial creation of the ScrollTrigger so I got into an endless loop of reverting text, re-splitting it and creating a new ScrollTrigger that did the same stuff again... So I basically failed at my first attempt to figure this out.
     
    What I ended up doing was creating my own debounced resize event (only fires when resizing is finished, not while it occurs)  called killAll() which does the following:
    reverts all the text kills all the ScrollTriggers created from the batch() calls the init() function which starts everything over again  

    See the Pen wvpmaez?editors=1111 by snorkltv (@snorkltv) on CodePen
     
    it seems to hold up reasonably well in my limited tests.
     
    Would definitely be interested to see if anyone or team @GreenSock members have a better solution 
     
     
  5. Carl's post in How can I do page sweeping animation? was marked as the answer   
    Hi and welcome to the forums,
     
    For something like this I think the trick is to NOT think of them as individual bars but more like stacked full screen elements that just animate left at different rates. You don't control the width of anything, just the x value.
     

    See the Pen mdpMwWY?editors=1010 by snorkltv (@snorkltv) on CodePen
     
    In this example I'm doing a stagger on the top image and 3 colored full screen divs underneath it.
    You can get drastically different results by changing
    duration of animation ease of animation stagger: each stagger: ease I set up GSDevTools for you so you can scrub through and explore the timing.
     
    If you are just starting out, you can take my complete GSAP beginner's course for free it has videos on staggers and the advanced stagger properties used in this demo.
  6. Carl's post in Can only play() tween once was marked as the answer   
    try tween.invalidate().restart()
     
    sneaky @pointC jumps in but here are the docs in case you want to learn more
     
     
    https://greensock.com/docs/v3/GSAP/Tween/invalidate()
  7. Carl's post in Toggle state while element is in view with scrollTrigger was marked as the answer   
    This was kind of fun to make and borrows from some technique's I've seen @GreenSock discuss. It will most likely be a video lesson in ScrollTrigger Express very soon
     

    See the Pen eYyBooE?editors=0110 by snorkltv (@snorkltv) on CodePen
  8. Carl's post in Can you scroll to a label without scrolling animation? was marked as the answer   
    Thanks for the clean demo. Very helpful!
     
    Great job converting the label to a scroll position too!
     
    Since you already did the hard work I was able to tap into the ScrollTo Plugin using a set() to automatically jump to the position
     
    gsap.set(window, {scrollTo:position})  

    See the Pen PoEPxwM?editors=1011 by snorkltv (@snorkltv) on CodePen
     
    It's important to note that in order for this to work well I had to change your scrub value from 1.2 to true. When scrub was set to 1.2 it means the scroll position would need to "catch up" to where it was set, thus resulting in a little animation. Change it around to see what I mean.
     
    Also I loaded ScrollTo and the other plugins using the JS settings tab (click the gear across from the JS tab)
     
    You might appreciate the Free lesson I just released on using ScrollTo with ScrollTrigger. It seems you know quite a bit but it may show you another cool trick using the start and end values of a ScrollTrigger
     
    https://www.creativecodingclub.com/pages/free-lesson-scrollto-scrolltrigger
     
     
  9. Carl's post in Shrink logo on scroll and keep it fixed was marked as the answer   
    Hi and thanks for providing the demo!
     
    There's probably a few ways to achieve this but what I did:
    modified the logo css to reflect where I want the animation to end: small, centered, with position fixed added an animation to the ScrollTrigger that animates from the big and centered values set the scrub value to true and removed the toggleActions.
    See the Pen gOoaoYL by snorkltv (@snorkltv) on CodePen
     
     
    Hopefully this gets you in the right direction!
     
    If you want loads of ScrollTrigger tips and tricks, here's a shameless plug for my course ScrollTrigger Express
  10. Carl's post in Help with adding EaselJS to my project was marked as the answer   
    If your end goal is just brightness / exposure effects you can do that just with css filters and gsap as @OSUblake suggested.
    Here is a demo and video from one of my courses
     

    See the Pen mdOBLoR?editors=0010 by snorkltv (@snorkltv) on CodePen
     
    Full Lesson Video
     
    If you want to check out my courses you can access my complete GSAP 3 beginner's course for free (link below).
     
    I'd be happy to extend a 15% discount if you want to purchase Lifetime access to my full course bundle (over 140 lessons and growing weekly).
    Just use coupon code: gsforums at checkout within the next 10 days.
    Learn GreenSock at creativeCodingClub.com
     
    If you're serious about getting back into GSAP I'm confident this training will save you loads of time.
     
    Unless you have good working knowledge of working with the HTML <canvas> element AND the EaselJs library I don't think it's a good place to start with GSAP. You will do MUCH better working with HTML, CSS and basic SVG elements. 
     
     
     
     
  11. Carl's post in Random loop in between 1-9 was marked as the answer   
    Hi @marko krstic
    here I looped through all the circles and assigned them an animation along a path.
    the animations have random delays which means they won't start in order 1 - 9.
    see if this works for you
     

    See the Pen OJOOZXo?editors=0010 by snorkltv (@snorkltv) on CodePen
     
    *edit: I changed the delay so that the first circle starts immediately at time:0 and the rest have a random delay using
    delay: index == 0 ? 0 : "random(0.1,5)",  
  12. Carl's post in OnReverse callback don't trigger was marked as the answer   
    Hi there seems to be some misundertandings.
     
    There is no onReverse method or callback in all of GSAP (Tweens, Timelines, ScrollTrigger, etc).
    There is an onReverseComplete callback on Tweens and Timelines which fires when an animation is done reversing.
     
    onStart is a callback for tweens and timelines
     
    onEnterBack is a callback for ScrollTriggers and belongs in the ScrollTrigger config object
     
    How you are using it here is incorrect.
     
    Please see comments in code below
     
    let fourthTransition = gsap.timeline({   scrollTrigger: {     trigger: "#main-container-5",     id: "container5",     start: "top top",     end: "top top",     markers: true,     toggleActions: "play none reverse none", /* *** You could put an onEnterBack here *** */ onEnterBack:function(){}   }, /* *** There is no such thing as onReverse() *** */   onReverse: () => {     console.log("on reverse!")     document.querySelector("#fixed-text").innerText = "13"   },   onStart: () => {     console.log("START!")   }, /* *** onEnterBack() does not belong here *** */   onEnterBack: () => {     console.log("on enter back")     document.querySelector("#dinamic-text-5").innerText = "15"   }, });  
  13. Carl's post in Click animation always applied to last element was marked as the answer   
    Hi @Josh Mathis
     
    Thanks for the demo. 
    You were really quite close.
     
    To get around ONLY the last item opening and closing it was just a matter of declaring the tl variable with let like so on line 13
     
    let tl = gsap.timeline({ paused: true });
     
    After that it seems to work fine.
     
    if you want to just toggle the open and closed state of each faq independently on click you can simplify your click code a lot like this

    See the Pen QWOLoyK?editors=0010 by snorkltv (@snorkltv) on CodePen
     
    If you want to automatically close the open item every time you open a new item you can do something like this

    See the Pen eYeOXRV?editors=0010 by snorkltv (@snorkltv) on CodePen
     
     
    Notice how I'm assigning an "animation" property to each faq. This makes it easy to target a particular faq and its animation.
     
  14. Carl's post in Trying to Play first tween just once but repeat the rest of animation code twice after that? was marked as the answer   
    there are few ways to do this. if you want to avoid tracking how many times the 2nd part has played without incrementing a variable or something you can lean on tweenTo() and tweenFromTo()
     
    I put 2 labels in your banner: after the first tween and after the end of the timeline
    Then I created a main timeline that tweens to the first label and repeats a tween between the first label and last
     
    let main = gsap.timeline() .add(tl.tweenTo("banner")) .add(tl.tweenFromTo("banner", "end", {repeat:1}))  

    See the Pen dyVwMZz?editors=0010 by snorkltv (@snorkltv) on CodePen
     
    This video from my courses should help explain a bit more
     
     
     
  15. Carl's post in Conditional Masking was marked as the answer   
    Glad to hear you are enjoying GSAP 3 Express! Currently the Free Trial of the course and a handful of bonus lessons get released over the course of a week. Students who want to learn more faster have the option of unlocking all my courses (over 130 lessons) for less than $10 a month. 
    So far it has provided a nice balance of allowing thousands of students to learn GSAP for free while I still make some money (necessary). 
     
    One of my lessons covers how to loop through multiple elements and assign them an animation. When you interact with that element its animation will play or reverse. If you choose to "open" an element we use a variable to track which element is currently open so we can close it
     

    See the Pen BaLWxLW by snorkltv (@snorkltv) on CodePen
     
    In your approach you are creating an animation BEFORE you are applying your classes that you are using to select the target of the animation. 
     
    When you add and remove classes it has zero impact on tweens that you created prior.
     
    We typically don't build out full feature requests here, but since you invested the time in providing a demo that was "ready to go" and this could make for a good lesson I made some modifications to account for your recent requests.
     
    It may be a bit much for someone just starting out but it builds off the the the techniques in the demo above. 
    In the "mouseover" event I'm looping through ALL the menu items and reversing the animations of all the elements that are not being rolled over. 
    This is really only necessary to accommodate your request that on initial load all menu items are fully visible.
     

    See the Pen vYeybEG?editors=0011 by snorkltv (@snorkltv) on CodePen
     
    Note, I'm not adding or removing any classes but you can add that in if for some reason it's necessary. Hope this helps!
  16. Carl's post in codepen RUN was marked as the answer   
    Akapowl is correct, I was in the process of grabbing a screenshot so here it is.
    BTW i find the UI for this kind of troublesome as I'd rather have "ENABLE RUN BUTTON" instead of turning off the auto updating preview.
  17. Carl's post in How to sync two complex timeline animations inside one scrollTrigger was marked as the answer   
    First, thanks for the great demo. It's rare that we see a complex scenario so cleanly stripped down to the bare necessities.
     
    I know you said you couldn't specify the duration of each timeline due to the complexity, but i just want to make sure you know that you can dynamically assign the duration when the scrolling timeline is inserted into globalTimeline.
     
    globalTimeline.add(animateScrolling()).add(animateBox().duration(globalTimeline.duration()), "<");
     
    See if this works for you:

    See the Pen mdBVxxE?editors=0010 by snorkltv (@snorkltv) on CodePen
     
    My second suggestion was to use the progress of the ScrollTrigger to adjust the progress() of the scrolling timeline onUpdate but I got funky results. Perhaps we can pursue that more if this first solution doesn't work for you and your setup
  18. Carl's post in Repeating animation Play on Mouse Hover - stop on Mouse Hover Leave was marked as the answer   
    doh! sorry about that, totally missed that in the initial post.
    see how this works. I basically set the tween up to check to see if you are hovering or not to see if it should keep playing every time it gets back to its starting position.
     

    See the Pen bGrLQMM?editors=0010 by snorkltv (@snorkltv) on CodePen
     
    @GreenSock I found an odd behavior here. When the tween plays forward through the first iteration and then yoyo's back to the starting point the progress() of the tween is 0, yet calling play() doesn't advance the playhead forward. I had to call restart() to get the tween to advance. 
     
    Note it's important that I have the play() in there too
  19. Carl's post in Scrolltrigger: How to Activate Function without GSDevTools was marked as the answer   
    great to see you applying what you learned in the courses to your own projects!
     
    I didn't have any trouble removing the GSDevTools line.
     
    However, I don't think you want that position parameter of ">-50%"
     
    see if this works for you
     

    See the Pen JjyXmXg?editors=0010 by snorkltv (@snorkltv) on CodePen
     
    for others watching. the animation in question was the text "testing testing testing" near the bottom.
    it seems like it is being triggered properly now
  20. Carl's post in Newb: How can I remove GSAP's inline styling upon animation-completion? was marked as the answer   
    Hi and welcome to the GreenSock forums,
     
    Thanks so much for the clear demo.
     
    You can use an onComplete callback to apply clearProp:"all" to remove the inline styles.
    Be sure to inspect your box after the animation runs in the demo below

    See the Pen bGrVwxv?editors=1010 by snorkltv (@snorkltv) on CodePen
     
    more on clearProps: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin#h3-clearprops
     
    this video on callbacks and scope may help too
     
     
  21. Carl's post in Burger navi animation was marked as the answer   
    Hi and welcome to the GreenSock forums,
     
    thanks for providing the demo.
     
    it seems your animation is set up to start with the menu open and then close it.
    I forced the animation to it's end (closed state) using progress(1) at the end of the timeline.
     
    it also seems your css is set up so that the page loads with the menu items visible. 
    I set the opacity to 0 in the css and toggle it back to 1 once the page is loaded using 
     
    gsap.set(".menu-overlay", {opacity:1})  

    See the Pen PojVQLv?editors=0110 by snorkltv (@snorkltv) on CodePen
     
  22. Carl's post in Trouble loading SlowMo for first time was marked as the answer   
    judging solely from the code you provided you have a typo in that you are missing the closing ) and you probably should use leading 0s
     
    try
    gsap.to('.box', 3,{x: 1000, ease: "slow(0.1, 0.7)"}); and it looks like you are loading EasePack from 2 sources. just use 1 of them
  23. Carl's post in Reveal headers on scroll (multiple headers) using ScrollTrigger and SplitText was marked as the answer   
    You will want create a loop so you can create animations and ScrollTriggers for each header. 
     
    A basic demo is available in this thread
     
  24. Carl's post in timeline with scroll trigger was marked as the answer   
    Welcome to the forums
     
    Thanks for the demo.
     
    You were pretty close. The biggest thing to fix is that you need to find the title and text in each section.
    Notice how I use querySelector on each section in the the loop
     

    See the Pen BaRMGNV?editors=1010 by snorkltv (@snorkltv) on CodePen
     
    My course ScrollTrigger Express has a video explaining exactly how to approach this type of project.
    Here is a demo I use to teach this approach
     

    See the Pen b0b8e9c4a880b97379630f2ab9561407 by snorkltv (@snorkltv) on CodePen
     
    Learn more about ScrollTrigger Express
  25. Carl's post in Multi-Tween Timeline - parameterized properties was marked as the answer   
    it sounds like passing an array of durations into the config object  may do the trick. 
     

    See the Pen wvdmdNp by snorkltv (@snorkltv) on CodePen
×