Jump to content


  • Posts

  • Joined

  • Last visited


17 Newbie

Recent Profile Visitors

790 profile views
  1. Thanks @PointC I deleted my initial reply because I see it is part of TweenMax (it was a question about how to add it to codepen because it's not on the list of plugins you can try on codepen).
  2. Hi, I'd like to animate an SVG <feTurbulence> filter, where I can animate the `baseFrequency` and `numOctaves` values down to 0. How do I select these values to animate them in GSAP, and is this possible? Codepen link attached, but I guess on a theoretical level it will either be something like this: Pseudo Code Tweenmax.to (feTurbulence, 1, {numOctaves: 0, baseFrequency: 0}) Or would I do it something like this: Pseudo Code TweenMax.to([numOctaves, baseFrequency], 1, {opacity: 0}) And of course once I know which of the two theoretical ways is correct, how would I select with the turbulence filter itself or its attributes. I've traditionally only used GSAP on DOM or SVG elements and not filters or filter attributes so this is a tad confusing. Many thanks in advance for any assistance.
  3. Thank you both. It'd been a long day and that is a tad embarrassing. Ten thousand apologies.
  4. Hi, I have a custom cursor I'm doing with GSAP, which all works OK when I move it around the page. I'm trying to add a "mouseover" event listener so when you hover over a link the cursor grows, not only is the function I'm using for this not working, but it breaks the entire custom cursor, but I can't work out why this is happening? I've commented out the problematic "mouseover" function in question (at the very bottom of the Javascript) so you can see how the custom cursor should look, can anyone give any suggestions as to why it breaks? Em
  5. Hi, It is possible with Greensock to create something similar to this: https://www.studiotreble.com/ From what I know GSAP doesn't do effects and filters? I've looked at pixi.js this morning, but I don't really want to have over 400kb of JS for one effect and I am a bit pushed in terms of learning an entirely new library (I'm currently having to learn React / Vue as well). And besides I love Greensock and find it to be the only library where the learning is actually fun. Is a liquid animation effect possible with just SVG / Greensock? Or does anyone have any pointers how to learn this natively (would it fall under webGL? Which is something I haven't really looked at yet). Thanks in advance for any tips or pointers. Emily
  6. Hi @OSUblake and @ShaunGorneau Thanks for both answers this is fabulous (and apologies in the delay in coming back to you both). Em
  7. Hi, I have a series of shapes within an SVG I'd like to apply a tween to randomly - how would I go about this? In the attached CodePen example I have 9 dots and I'd like it so one animates in and out, followed by a different one selected at random. (currently all the dots are animating at the same time) I'm guessing I'll have to loop through the dots class and have it pick one of them at random? I'll be honest though, I'm struggling how to get this to work. Any pointers would be wonderful. Em.
  8. Thanks Sahil, that's great. My general JS knowledge isn't yet what I need it to be. Much appreciated.
  9. Hi, I'm trying to use the ternary operator on a tween to have two different colours depending on the window size of part of a menu after being clicked. The actual animation is part of an SVG timeline, but I've simplified it down in the codepen with one div. What I'm trying to do is use the ternary operator to change the color dependent on window size. In the past I've used it on animation duration values like this: .to("#square", window.innerWidth > 736 ? 1.5 : 1, {opacity: 1}) I can't seem to get it work on tween property values inside the curly braces though? Doing the following won't work: .to("#square", 1, {window.innerWidth > 736 ? background: "red", : background: "blue" }) Is there a simple way within a timeline to have an if/else or ternary operator on the property:value pairs of a tween, that I can change dependent on window size? The only other option I guess would be to duplicate the entire timeline in another if/else statement
  10. Hi @PointC / @Jonathan, I got it to work, I think perhaps my question could have been slightly clearer, Craig's answer worked if I did it outside of the main timeline. I thought you could use conditional logic to fire an individual tween during a timeline, but I couldn't get that to work. When using the if statement after the timeline it did work as expected. Many thanks for taking the time to help. Em
  11. Your codePen example doesn't seem to be working? Also, won't that mean duplicating the entire code block which is something I'm trying to avoid, i.e. i'll have to then do an block of code for the non-home page variation. I mean, if that's the only way to do it, that's fine, I just had it in my head I'd be able to tweak one line of a timeline dependent on what page the user was on. Thanks,
  12. Hi, I have a menu animation where the menu on the home page has an extra element. Instead of duplicating a timeline for this animation (which is quite complex) I'm trying to use the ternary operator in the timeline so that when the user in on page-1 (the home page), this element on the timeline animates. Because the animation is quite complex I've done a basic unrelated animation in the attached CodePen to show the problem. Basically, I want the second block to only animate when `.page-1` is present (which is a class I've added to the page-wrapper in the example), but not throw an error when it isn't there on the other pages. I've commented out what I was trying with box2, which does animate as expected, but it still throws an error on pages without this element, and obviously I can't show the errors on other pages because of the nature of CodePen being a single page application. Any help would be awesome. var tl = new TimelineMax({repeat: -1}); var box1 = document.getElementsByClassName("box-1")[0]; var box2 = document.getElementsByClassName("box-2")[0]; var box3 = document.getElementsByClassName("box-3")[0]; var page1 = document.getElementsByClassName("page-1")[0]; tl .add("start") .from(box1, 1, {y: 10, opacity:.3}) // .from(page1 ? box2 : undefined, 1, {y:10, opacity: .3}, "start") .from(box3, 1, {y: 10, opacity:.3}, "start")
  13. Hi, I have a timeline (inside a function) that I want to pause when a window is above 737px (it's a simple animation to replace a video that is present on larger screens). So I've set up a resize event, and as expected when the window loads at greater than 737px the timeline is paused and when I resize the window to < 737px, it does then play the animation. All good. However, when I either load the window below 737px (or resize the window more once when I've loaded the window initially at a window size greater than 737px) it doesn't pause? I've recreated the problem with a rotating div in the attached Codepen. Any help, ideas or suggestions very welcome. Em. var tl = new TimelineMax(); function animation() { if (window.innerWidth < 737) { tl.to ("#div", 3, {rotation: 360, repeat: -1, ease:Linear.easeNone}); } else { tl.pause } } animation(); window.addEventListener("resize", animation, false)
  14. @OSUblake and @Shaun Gorneau Thanks for both answers (and added explanations).