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

Carl last won the day on May 28

Carl had the most liked content!

Community Reputation

10,102 Superhero

About Carl

  • Rank
    Moderator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  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
×