Jump to content
GreenSock

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

Leaderboard

Popular Content

Showing content with the highest reputation on 09/08/2021 in all areas

  1. Just a little FYI - I do have a tutorial all about meters, needles and dials which may be helpful. https://www.motiontricks.com/svg-skill-level-meter/ Happy tweening.
    5 points
  2. Hi @Walek, Have a look at svgOrigin https://codepen.io/sgorneau/pen/oNwBJmj?editors=0110
    5 points
  3. Hey there HidiH, The 'start' points for a scrollTrigger are positions on the page - not positions in a timeline. You'll want to make sure that the 'start' position of the second scrolltrigger is positioned after the 'end' of the first. setting markers:true on your scrollTriggers will help debug this.
    5 points
  4. Wow ... i guess we all hit submit at the same time! 🤣
    4 points
  5. Hi @Joe165, You can look into Window.matchMedia() https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia to check conditions to determine how/when you want certain tweens/timelines to fire.
    4 points
  6. Welcome to the forums @sergiu You might want to check out our React Guide. A timeline should never be created outside of a hook, and your mouse events keep adding more animations to the timeline, making it longer. If you need more help, please create a minimal demo. Here's a next.js template you can fork. https://codesandbox.io/s/gsap-nextjs-starter-jekrn
    4 points
  7. On second thought I guess you could reverse the first tween and make this happen. Maybe something like this: https://codepen.io/PointC/pen/7658a5f21db59cb183374e8fbd04e474 If you want to go the SplitText route, we do have several 'typewriter' themed threads. Here are a couple. Hopefully that helps. Happy tweening.
    3 points
  8. 3 points
  9. I'm not sure if I understand you fully. I assume that by viewport-sizes you refer certain/proportions of the window. You could use conditional statement depended on window.clientWIdth of height, you could work with window.matchMedia or try to set up you whole construction that all of that isn't necessary of only in certain cases.... Hard to say without an clearer picture of why you want what you wand. As basic example in code-pen would help.
    3 points
  10. Hey @Joe165 you can use the ScrollTrigger.matchMedia() 🙂 https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()
    3 points
  11. Thanks for the great support to all of you! I will try the polyline solution, which looks great!
    3 points
  12. Hey Donny, It is certainly a matter of taste. You could also use GSAP SplitText to build up the popup in steps. https://codepen.io/mikeK/pen/eYRgEaa?editors=1010 Happy tweening ... Mikel
    2 points
  13. Hi Alguna! I think you would need to call render for each of your triggers. Perhaps something like this. ScrollTrigger & Three JS (codepen.io)
    2 points
  14. #container { margin:0; padding:0; font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 17px; line-height: 150%; } #container h1 { font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 48px; margin: 10px 0 0 0; padding: 0; line-height: 115%; text-shadow: 1px 1px 0 white; } #container h2 { font-family: Signika Negative, Asap, sans-serif; font-weight: normal; font-size:30px; color: #111; margin: 18px 0 0 0; padding: 0; line-height:115%; } #container p { line-height: 150%; color:#555; margin: 0 0 10px 0; } #container a { color:#71b200; } #container .normalBullets code { font-size: inherit; color: inherit; font-weight: normal; line-height: inherit; font-family: inherit; } #container .normalBullets li strong { font-size: 110%; } #container .normalBullets li { margin-bottom:8px; } #container .blackBG h1, #container .darkBG h1 { color: #ddd; text-shadow: none; } #container .blackBG p { color: #999; } #container .section { width: 100%; text-align: center; position: relative; padding: 20px; } /* .block was causing conflict with wp theme --- renamed below */ #container .customblock { padding: 10px; text-align: left; position: relative; } #container .blackBG { background-color: black; } #container .lightBG { background-color: #e4e4e4; } #container .subtleDark { color: #999; text-shadow: none; } #container .blackBG p strong { color:#ddd; font-weight: normal; } #container .controls { background-color: #222; border: 1px solid #555; color: #bbb; font-size: 18px; } #container .controls ul { list-style: none; padding: 0; margin: 0; } #container .controls li { display: inline-block; padding: 8px 0 8px 10px; margin:0; } /** CODE **/ #container .code { width: 100%; border: 1px solid #555; padding: 0; margin: 20px 0; } #container .code pre.prettyprint { margin:0; overflow: auto; } #container .codeTitle { color: #aaa; background-color: #111; padding: 8px; font-size:18px; border-bottom: 1px solid #555; } #container code, #scroller code { color: black; font-size: 16px; } #container .blackBG code, #container .darkBG code { /* carl removed color: #ccc; */ } #container pre { font-size: 1.1em; padding:8px; background-color:#333; color:white; border: 1px solid #777; } /** TOSS **/ #container .box { background-color: #91e600; text-align: center; font-family: Asap, Avenir, Arial, sans-serif; width: 196px; height: 100px; line-height: 100px; overflow: hidden; color: black; position: absolute; top:0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } /** BUTTONS **/ #container .button { display:inline-block; border-radius:8px; border-bottom-width: 2px; box-shadow: inset 0px 1px 0px rgba(255,255,255,0.6), 0px 3px 6px 0px rgba(0, 0, 0, 0.6); cursor:pointer; text-align: center; font-family: Signika Negative, Asap, Avenir, Arial, sans-serif; position:relative; margin: 4px; color:black; } #container .largeButton { padding: 12px 24px; font-size: 20px; margin: 12px 8px; min-width:110px; } .greenGradient { border: 1px solid #6d9a22; background-color: #699a18; background: linear-gradient(to bottom, #8cce1e 0%,#699a18 52%,#639314 53%,#76b016 100%); /* W3C */ text-shadow: 1px 1px 2px #384d16; color:#fff; text-decoration: none; } /** EXPANDABLE POINTS (FAQ) **/ .expPoint, .expList li { list-style: none; line-height: normal; margin: 0 0 0 8px; padding: 6px 4px 4px 24px; position:relative; border: 1px solid rgba(204,204,204,0); font-size: 110%; color: #111; font-weight: normal; } .expPoint, .expContent { font-family: Signika Negative, Asap, sans-serif; font-weight: 300; line-height: 140%; } .expPoint:hover, .expList li:hover { background-color:white; border: 1px solid rgb(216,216,216); } .expContent { height: 0; overflow: hidden; color: #444; margin: 2px 0 0 0; padding-top: 0; font-size:16px; } .expMore { color: #71b200; text-decoration: underline; font-size:0.8em; } .arrow-right { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #999; display:inline-block; margin: -4px 8px 0 -14px; vertical-align: middle; opacity:0.8; } .tableCellDesktop { display: table-cell; } .tableCellDesktop img { left: 120px; } @media screen and (max-width: 860px) { .tableCellDesktop { display: block; } .tableCellDesktop img { left: 0px; } } Features Touch enabled - works great on tablets, phones, and desktop browsers. Incredibly smooth - GPU-accelerated and requestAnimationFrame-driven for ultimate performance. Compared to other options out there, Draggable just feels far more natural and fluid, particularly when imposing bounds and momentum. Momentum-based animation - if you have InertiaPlugin loaded, you can simply set inertia: true in the config object and it'll automatically apply natural, momentum-based movement after the mouse/touch is released, causing the object to glide gracefully to a stop. You can even control the amount of resistance, maximum or minimum duration, etc. Complex snapping made easy - snap to points within a certain radius (see example), or feed in an array of values and it'll select the closest one, or implement your own custom logic in a function. Ultimate flexibility. You can have things live-snap (while dragging) or only on release (even with momentum applied, thanks to InertiaPlugin)! Impose bounds - tell a draggable element to stay within the bounds of another DOM element (a container) as in bounds:"#container" or define bounds as coordinates like bounds:{top:100, left:0, width:1000, height:800} or specific maximum/minimum values like bounds:{minRotation:0, maxRotation:270}. Sense overlaps with hitTest() - see if one element is overlapping another and even set a tolerance threshold (like at least 20 pixels or 25% of either element's total surface area) using the super-flexible Draggable.hitTest() method. Feed it a mouse event and it'll tell you if the mouse is over the element. See http://codepen.io/GreenSock/pen/GFBvn for a simple example. Define a trigger element - maybe you want only a certain area to trigger the dragging (like the top bar of a window) - it's as simple as trigger:"#topBar", for example. Drag position, rotation, or scroll - lots of drag types to choose from: "x,y" | "top,left" | "rotation" | "scroll" | "x" | "y" | "top" | "left" | "scrollTop" | "scrollLeft" Lock movement along a certain axis - set lockAxis:true and Draggable will watch the direction the user starts to drag and then restrict it to that axis. Or if you only want to allow vertical or horizontal movement, that's easy too using the type ("top", "y" or "scrollTop" only allow vertical movement; "x", "left", or "scrollLeft" only allow horizontal movement). Rotation honors transform origin - by default, spinnable elements will rotate around their center, but you can set transformOrigin to something else to make the pivot point be elsewhere. For example, if you call gsap.set(yourElement, {transformOrigin:"top left"}) before dragging, it will rotate around its top left corner. Or use % or px. Whatever is set in the element's css will be honored. Rich callback system and event dispatching - you can use any of the following callbacks: onPress, onDragStart, onDrag, onDragEnd, onRelease,, onLockAxis, and onClick. Inside the callbacks, "this" refers to the Draggable instance itself, so you can easily access its "target" or bounds, etc. If you prefer event listeners instead, Draggable dispatches events too so you can do things likeyourDraggable.addEventListener("dragend", yourFunc); Works great with SVG Even works in transformed containers! Got a Draggable inside a rotated/scaled container? No problem. No other tool handles this properly that we've seen. Auto-scrolling, even in multiple containers - set autoScroll:1 for normal-speed auto scrolling, or autoScroll:2 would scroll twice as fast, etc. The closer you move toward the edge, the faster scrolling gets. See a demo here (added in version 0.12.0) Sense clicks when the element moves less than 3 pixels - a common challenge is figuring out when a user is trying to click/tap an object rather than drag it, so if the mouse/touch moves less than 3 pixels from its starting position, it will be interpreted as a "click" and the onClick callback will be called (and a "click" event dispatched) without actually moving the element. You can define a different threshold using minimumMovement config property, like minimumMovement:6 for 6 pixels. All major browsers are supported including IE9+. IE8 lacks hitTest() support. Demos Draggable Showcase Draggable How-To Demos See full documentation here. To get InertiaPlugin (for the momentum-based features), join Club GreenSock today. You'll be glad you did. If not, we'll gladly issue a full refund. To learn how to include Draggable and InertiaPlugin into your project, see the GSAP install docs.
    1 point
  15. @PointC your reverse tween idea works like a charm. Thanks!
    1 point
  16. Welcome to forums @Mrgpicasso Did you register the plugin? And for next.js you might need to import from the dist folder unless you enable module transpiling. import { gsap } from "gsap/dist/gsap"; import { Flip } from "gsap/dist/Flip"; gsap.registerPlugin(Flip); And here's a demo of Flip and React. https://codepen.io/GreenSock/pen/MWmqzjE If you need more, please provide a minimal demo. Here's a next.js template you can fork. https://codesandbox.io/s/gsap-nextjs-starter-jekrn?file=/pages/index.js For the bonus plugins like Flip, switch the package from gsap to gsap-trial, like here. https://codesandbox.io/s/gsap-bonus-plugins-react-starter-je6ln?file=/src/App.js
    1 point
  17. I don't think there is a right-to-left option with the TextPlugin. ScrambleText has a right-to-left Boolean, but AFAIK there is no way to do that with the TextPlugin. You'd want to use SplitText. Happy tweening.
    1 point
  18. That's def a big problem. You need to give your filters unique IDs. serj-code (forked) - CodeSandbox
    1 point
  19. Sorry about any confusion there - I assume you're talking about the ones in the CodePen collection, right? Those were from the old version but I just updated them for GSAP 3 so you should be all set now. If you find one that isn't updated, just let us know and we'll get that fixed pronto.
    1 point
  20. Thanks for this - any idea of the correct codepen imports for it? The ones in the example pens dont seem to work. More broadly is there a decent cheat sheet for the imports across the board?
    1 point
  21. And you can get the ref to your component by just doing this. const q = gsap.utils.selector(this.$el);
    1 point
  22. You weren't using the selector correctly. It returns a function. const q = gsap.utils.selector(block); const h3 = q("h3"); const foo = q(".foo"); Think of it kind of like jQuery's $. const $ = gsap.utils.selector(block); const h3 = $("h3"); const foo = $(".foo"); We use the name q in our code samples because it returns a query function.
    1 point
  23. @mikel I really like this ! 💯
    1 point
  24. ... and another concept. Additional connecting lines could be set separately in relation to this polyline. https://codepen.io/mikeK/pen/jOwybLM Happy tweening ... Mikel
    1 point
  25. An addendum.... Why it's rude NOT to include a minimal demo (like a CodePen) It forces everyone else to read through lengthy descriptions and try to wrap their minds around something abstract that might take 10 seconds to spot in a simple CodePen. It's like if your car broke and you called a mechanic's shop and said "please tell me what's wrong with my car." Without seeing it, what would you expect them to do? Their only option is to walk through a ton of diagnostic questions (many of which you may not have the answers to) and burn hours of their time guessing. That's expensive and frustrating. You're asking them to do all of that for FREE while they've got other customers standing in line who were at least willing to go through the hassle of bringing their car in (which is equivalent to creating a CodePen). If your car was in front of the mechanic, it may take 10 seconds to diagnose: "oh, you're out of gas." DOH! When someone won't bother to spend a little time creating a minimal demo and yet they're asking a bunch of volunteers to diagnose their issue for free, it isn't very motivating for those volunteers to sacrifice their time. It's almost like telling the mechanic "sorry, I don't want to expend the effort necessary to get my car to you...would you please drive out to my home and fix it for free?" Creating a minimal demo is probably the single best habit to get into for any developer learning to troubleshoot their own code. Plus it delivers the best chances of getting a prompt and accurate answer when you ask others for help. 👍
    1 point
  26. Forgot to mention more recently, I've had success using Draggable and FLIP together for what I needed. Here's an example that includes a bit of my final solution: https://codepen.io/MichaelHeyDonny/pen/yLXVxbx The top left blue bars are the triggers. There's a few things missing in this example like how to handle empty parent containers etc but thought I would share. The FLIP plugin has certainly helped greatly in providing a solution to what this has replaced. So thanks GSAP as always!
    1 point
  27. Thank you very much, this is exactly what I needed I share with you my code here needs $(function(){ $('.gallery__item').on('mouseenter', function(event){ event.preventDefault(); $(this).toggleClass('hover-in'); }); });
    1 point
  28. Hey there Vlad! This example is using canvas - GreenSock can animate properties of canvas objects - but the setup will involve learning about the canvas API and likely a bit of maths for the shapes/sine waves Here's a thread that may help Daniel Shiffman's youtube channel is also great for learning more about these animations. https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw
    1 point
  29. Sure, here's a fork of that CodePen that uses a different strategy altogether and doesn't loop: https://codepen.io/GreenSock/pen/yLbOwOa?editors=0010 I also implemented directional snapping so that it always goes in the direction of the drag even if technically the closest snapping point is in the opposite direction. Enjoy!
    1 point
×