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 06/28/2019 in all areas

  1. Hello Gary and welcome to the forums! So glad to hear that you're enjoying GSAP. I'm not quite understanding what you're attempting to do. I think a demo of your technique would be helpful for us to understand and give feedback. See the below post for more information on how to create a minimal demo that we can see:
    4 points
  2. Okay, I think I understand what you're trying to do. Here's one way to do it with a SVG polyline along with some circles and text. It's a basic example, but maybe it'll help. https://codepen.io/PointC/pen/ZdvaRb Happy tweening.
    4 points
  3. Hi @Giuseppe Simonetti, ... and another test: https://codepen.io/mikeK/pen/QREjpr Happy tweening ... Mikel
    4 points
  4. Welcome to the forums, @Thinkingbox Developer. Sorry, but it's really tough to troubleshoot blind and this doesn't really sound like a GSAP issue. I'm not a Webpack guy, nor do we support the 3rd party gsap-promise library, so I'm not quite sure how to help here. Oh, and by the way, I'd strongly recommend using the yPercent:110 instead of y:"110%" format to be explicit about percentage-based values. That's totally unrelated to the issue you posted about, of course. Are you using the latest version of GSAP? And did you install it from NPM?
    3 points
  5. Welcome to the forum @dylanlarrivee If you're speaking is this example: It looks like you could maybe just set the _gsTransform += half the size of the your desired rect dimension in the updatePath function. var x1 = handles[0]._gsTransform.x+10; var y1 = handles[0]._gsTransform.y+10; var x4 = handles[1]._gsTransform.x+10; var y4 = handles[1]._gsTransform.y+10; For instance if your rect is 20. <rect class="handle" x="0" y="0" width="20" height="20" /> <rect class="handle" x="0" y="0" width="20" height="20" /> Maybe that will help get you heading toward your goals, or someone else will have a better suggestion if thats not performant enough. This thread might be played out with custom requests though. I think @OSUblake specifically might be tired of it, similar to other threads, (ha, ha). ??
    3 points
  6. @PointC: that is excellent! For beginners it could also be like this - step by step: https://codepen.io/mikeK/pen/ydppYJ Happy tweening ... Mikel
    3 points
  7. Nice work @mikel ? It's definitely easier with separate lines/paths rather than using a polyline.
    2 points
  8. Hi again @troymartz, I moved your thread to the main GSAP forum. We're glad you're excited about GSAP and thank you for joining Club GreenSock. Your post has a lot to go through so you may want to break it down into smaller bites with more GSAP specific questions or goals. That will probably yield more responses from the community. Happy tweening and welcome back.
    2 points
  9. The problem there is you're using "end" as a label for all the letter groups in the loop so they all fire at the same time. You need a unique label for each iteration. You can do that by creating a label like "end" + i. https://codepen.io/PointC/pen/PrEKJY Happy tweening.
    2 points
  10. Great catch! Sorry about that. One digit was wrong in the code. Doh! It should be fixed now. ?
    2 points
  11. Hi @troymartz Welcome to the forum. Are you offering a job here? I ask because you posted in Jobs & Freelance, but you said: It was unclear to me if you were just looking for some guidance or hiring a freelancer to help you. Any details you could post in regards to that would probably give you the best chance of a response from qualified GreenSockers. Thanks and welcome aboard.
    2 points
  12. You'd want to look at the isActive method to prevent clicks when the animation is playing. https://greensock.com/docs/TimelineMax/isActive() You could break the timeline into two or use an addPause in the middle. We've had a few discussions about different eases for reverse. That's entirely up to you. Loops are your friend. Happy tweening.
    2 points
  13. Your tween on line 99 has two sets of vars. I think you meant for that to be a .fromTo() tween rather than a .to() tween. The entire SVG also has its opacity set to 0 on line 34 of the CSS. If you fix those two problems, I think you'll be good to go. Happy tweening.
    1 point
  14. Hi Rich. This sounds more like a Flash/Animate CC question than a GSAP question. I'm not very familiar with how that software exports videos these days but I wouldn't be surprised if it doesn't really honor script-based updates. I'm sure there are tools out there that can take a SWF and convert it to video, but I'm not familiar with them, sorry. Maybe someone else around here knows. If you have any GSAP-specific questions, we'd be happy to help.
    1 point
  15. Hi @Giuseppe Simonetti, Welcome to the forum. I think @mikel has a nice solution for you there. It was unclear to me if this was a scroll triggered animation or something full screen. You mentioned trying some things so we'd certainly take a look at what you have so far. Maybe you could make a demo? More info: Happy tweening and welcome aboard.
    1 point
  16. The pen with the colors and bread images uses looping to cut down on the JS length. Analyze it to see an example of how to do it. If you're talking about looping the HTML, it technically is possible using a pre-processing language like Pug, but that likely won't help you much since you need to put unique content in each one. I'd just make use of the copy-paste functionality
    1 point
  17. Hi @Giuseppe Simonetti, Welcome to the GreenSock Forum. This is just a test (problem timing in relation to window size; open it in Codepen) ... https://codepen.io/mikeK/pen/PgKjjG Maybe there are a few suggestions for you in it. Happy tweening ... Mikel
    1 point
  18. This is just a suggestion to update your CDN links for "copied to clipboard" feature on the Doc page. 2.0.2 is not the latest ver. of TweenMax. I spent a lot of time trying to get things working and as a newbie it really through me for loop, realized only in hindsight. Thank you very much. My best!
    1 point
  19. Good call. We'll get that kicked upstairs to the big guns and it should be patched up shortly. In the meantime, you should bookmark this pen as it's up to date. https://codepen.io/GreenSock/pen/djXzyR Happy tweening.
    1 point
  20. A solution without additional scrollMagic It's not very elegant looking with the verbose callbacks but here is a gsap solution that appears to work. It uses callbacks that pass the desired slide index and a function that loops through and adds or removes class. You could also use the function to trigger secondary animations using the index that is passed to it. https://codepen.io/Visual-Q/pen/ZdaxXQ?editors=1010
    1 point
  21. Hi @shouldaStayedInside, Welcome to the GreenSock Forum. If you do not need a blur effect, this can also be a solution. https://codepen.io/mikeK/pen/GbOORx Happy tweening ... Mikel
    1 point
  22. It's because you're setting the 0.5 in the default "stagger" place. Have a look at the docs for a full listing of the properties. // Instead of this .staggerFromTo(second.children, 0.7, { opacity: 0, yPercent: 50 }, { opacity: 1, yPercent: 0, ease: Sine.easeOut, stagger: 0.1 }, 0.5) // You want this .staggerFromTo(second.children, 0.7, { opacity: 0, yPercent: 50 }, { opacity: 1, yPercent: 0, ease: Sine.easeOut, stagger: 0.1 }, null, 0.5)
    1 point
  23. You can do that by determining velocity of mouse or scrolling, then use that velocity to apply skew. So to determine velocity you can use simple easing and take difference between target and easing value. Here is demo showing original effect based on mouse. This one uses a predefined tween, I set the progress of tween based on eased value. The scroll based effect is a lot more simple as you don't need to use any predefined tween,
    1 point
×