Jump to content
GreenSock

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

Carl last won the day on May 28

Carl had the most liked content!

Carl

Moderators
  • Content Count

    9,409
  • Joined

  • Last visited

  • Days Won

    534

Everything posted by Carl

  1. Carl

    GSAP Image Wiping

    Thanks, @elegantseagulls! I appreciate your support. better links to my courses in my signature.
  2. oh, ok, probably best to continue in that thread. It was very nice for @Ali Manuel to help you but we don't typically have the capacity to rebuild other people's projects on demand with new specifications. While I'm here though I believe making this full-screen will require some significant changes to the CSS and it's not really something that you would do with GSAP. If you have a question related to GreenSock animation please don't hesitate to ask.
  3. Hi a good rule to follow is that you don’t want to animate the trigger element. Use a parent element that doesn’t scale. check out my demos in this thread.
  4. Good to see everyone else's excellent advice got you where you need to be. Just as an fyi, that jumpiness that you were seeing prior to scrub:(number) was because some browsers don't have smooth scrolling enabled. I'm willing to guess if you scroll this very page you'll notice that the scrolling happens in small jumps and isn't smooth. The video below illustrates what smooth scrolling is and how some third-party libraries have been created to smooth out those little jumps. I've found FireFox on Mac and more recently Chrome have smooth scroll
  5. Glad to hear my suggestion might get you going in the right direction Yeah, that sounds about right. There's a section at the bottom of the ScrollTrigger docs that explains how durations work with scrub:true https://greensock.com/docs/v3/Plugins/ScrollTrigger but it sounds like you have a handle on it.
  6. 2 things that might work 1: put all the animation in one timeline I used this GreenSock starter demo this GreenSock starter demo and made some slight modifications to achieve "multiple fullscreen slides that are sitting on top of each other with their own scrubbable animation" https://codepen.io/snorkltv/pen/bGqvpqG?editors=1010 instead of sliding panels in, I just faded them in 2: position all your panels on top of each other but create a long page of "dummy divs" that is scrollable and contains child divs that act as the triggers for the animat
  7. Hi Nadia, In addition what @Cassie suggested I'm curious what part exactly you need help with. Do you have a basic animation already set up that you just need to control with scroll? Do you know how to animate text changing without scroll? Do you have an animation of a shape changing size? We're happy to help you along the way, but it's difficult to know exactly where to start and we're not in the habit of just building projects for people. If you need help "getting text to change" perhaps this video will help you. But even something as basic as "changing t
  8. Hi and welcome to the GreenSock forums, It sounds like you are running your javascript BEFORE the DOM is accessible. Either put your tween code inside the jQuery document ready OR just make sure your script is right before the closing </body> tag. <script> gsap.to(".cont", { // selector text, Array, or object x: 100, // any properties (not limited to CSS) backgroundColor: "red", // camelCase duration: 1, // seconds }); </script> </body> or if you code is in that external file, load it right before the closing body (not in
  9. It sounds like you're referring to what has since become the official Flip Plugin. As a Shockingly Green member you have full access to all its powers.
  10. Hi and welcome to the GreenSock forums, This sounds like a great use for a simple timeline with 2 tweens: 1 that fades the element 1 that moves the element (or bg position) and starts later https://codepen.io/snorkltv/pen/zYZEdjj?editors=1010 If you need help with timelines and sequencing please see: If you need more help please provide a minimal demo.
  11. .panel1, .panel2, and .panel3 are used as unique selectors to select the panel that will be animated. inside the function those selector strings are used to dynamically select child elements function createPanel(panel) { var tl = gsap.timeline(); tl.from(panel + " .bg", {duration: 0.4, scale: 0, ease: "power1.inOut"}) when you call createPanel(".panel1") then the first tween in the timeline shown above will use the target selector ".panel1 .bg" which will scale the background element in .panel1 when call createPanel(".panel2") then the next tim
  12. HI. This is what we refer to as "functions that create and return timelines". You'll notice each panel has the same animation. The createPanel() function takes in a panel class as a parameter. The function then creates a timeline that animates a bunch of elements in that panel. That timeline is then inserted into the master timeline. Another way to put it is "the master timeline is adding the animation that is created and returned by the createPanel() function when we call it and pass in a particular panel." This is a very powerful technique when you wa
  13. Hi and welcome to the GreenSock forums, This demo here shows how to get pretty close to that effect. https://codepen.io/snorkltv/pen/bGqrJGN Be sure to read the docs on SplitText and staggers. If you have trouble understanding the docs, everything happening in this demo is covered in my free GSAP 3 beginner's course (see signature).
  14. hmmm, did you watch the Ferris Wheel lesson (members only link) in B-sides, bonuses and oddities? It's literally the next lesson after the Circular Distribution one that you are using and It explains how to counter-rotate each element to build a ferris wheel https://codepen.io/snorkltv/pen/RwKOrVb?editors=0010 the circles demo can be updated to use a negative rotation on each circle https://codepen.io/snorkltv/pen/wvJeVzW
  15. lol i just remembered I had a video on tapping into eases as functions. doh!
  16. hmm, i'm not understanding exactly what you want. Have you looked at the distribute() utility function? It makes ease-based distribution of values very easy: https://greensock.com/docs/v3/GSAP/UtilityMethods/distribute() also keep in mind that eases themselves are functions that return values based on the progress you pass in. So you can do something like Power4.easeIn(0.3) and get the corresponding y value on the ease graph. Perhaps this pen will help you understand how it works https://codepen.io/snorkltv/pen/ZEpzdZq
  17. Hey Blake, interesting findings about IDs with numbers. This article was the first I found when looking and just went with what it said. The main point is that they are invalid as CSS selectors.
  18. Glad to see you are enjoying "the fabulous" creative coding club. Not sure how you want to dynamically change the svg artwork but the problem with using an id is that your id is a number. a CSS id can not start with a number or just be a number. try something like circle.setAttribute("id", "circle" + counter++) For changing the colors there are plenty of options. I like stepping through the hsl() hue values to get a nice rainbow effect https://codepen.io/snorkltv/pen/dyvNLpX?editors=1010 using gsap.utils.wrap() you can also s
  19. thanks for the tip in the article. looks like 2 scrolltriggers is the way to go. your demo is great and I'm sure it would help. there is already this demo below which covers a lot of ground but as such it's also quite wordy and a lot of stuff happens outside the viewport https://codepen.io/GreenSock/pen/LYVKWGo I love the simplicity and clarity of your demo, especially since you can see the events fire exactly when the markers intersect on the way up and down. 👍 the only change I'd suggest is to space the scroller-start and scrol
  20. Great job (again), Jason. Seems you and your bruddah have loads of potential to make great things together. Very cool you followed @Cassie's advice with CodePen. Makes it so much easier for others to see, learn from, and share your work. It's a great tool too if you ever need help.
  21. glad this helped I'm not sure there is an easy way to do that with your current start and end settings. The trick with this stuff is to really play with things so that you can accommodate the most common use cases with the most pleasing visual result. reset is very jarring if the user sees it. I made it so that the animations start when the bottom of the triggers reach the bottom of the viewport. I added reverse for onLeaveBack and I think it works very nicely (if your window is larger then the tiny embed below. go full page) http
  22. thx, it looks like I wasn't following you perfectly there. however, I think there is some confusion about when onEnterBack happens. I modified your demo to only include one section. I added a little callback that changes the background color of the page when onEnterBack happens. https://codepen.io/snorkltv/pen/XWMpXyd?editors=0010 Scroll up and down all the way. You will see that the animation does not reset when onEnterBack fires. It only resets onLeaveBack (4th toggle action) as you have it set that way. //onEnter, onLeave, onEnterBack,
  23. welcome to the forums, thanks for the demo, it's a great start. I added a spacer on top and bottom of the page so that all elements could scroll in and out of the viewport fully. https://codepen.io/snorkltv/pen/VwpPevm?editors=1010 it appears each section behaves the same way. I don't see the third section acting any differently. your onLeaveBack is set to reset and that appears to be working correctly. the animations resets to a progress(0) where everything has opacity:0 when the start position moves down past scroller-start. Your on
  24. please watch the MorphSVG getting started video here: It's a touch dated, but explains the basics of setting up a morph animation. the end shape that you are morphing too most often is just used for the path data, there is no need to see it while the animation is happening. the video covers this.
×