Jump to content

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


Popular Content

Showing content with the highest reputation on 08/23/2019 in all areas

  1. 4 points
    Hey Sharik, Unfortunately I don't have the time to build it out for you but if you follow the steps I listed above I think you should be able to create the effect that you're looking for. I recommend creating it fully outside of React and then porting it into React since it seems that you're not very comfortable with React. We have a basic guide for how to use GSAP with React which you can read about here: I don't know you or your abilities so it is really impossible for me to make the timeline for you. I can tell you this: keep in mind Hofstadter's Law
  2. 4 points
    First, don't create a custom ease inside an animation. Do it like this: // Create your custom ease CustomEase.create("myEase", "M0,0,C0.126,0.382,0.282,0.674,0.44,0.822,0.632,1.002,0.818,1.001,1,1"); // Use the ID you gave your custom ease TweenLite.to(foo, 1, { ease: "myEase", x: 100 }); TweenLite.to(bar, 1, { ease: "myEase", x: 200 }); Sure. Just re-create an ease with the same ID. // myEase #1 CustomEase.create("myEase", "M0,0,C0.126,0.382,0.282,0.674,0.44,0.822,0.632,1.002,0.818,1.001,1,1"); // myEase #2 CustomEase.create("myEase", "M0,0,C0,0,1,1,1,1"); // These will use myEase #2 TweenLite.to(foo, 1, { ease: "myEase", x: 100 }); TweenLite.to(bar, 1, { ease: "myEase", x: 200 });
  3. 3 points
    Load GSAP into that pen and add this line: TweenMax.to("text", 0.5, {y:10, yoyo:true, repeat:-1}); That will move the mask text up and down. Happy tweening.
  4. 3 points
    Yes, you can animate a SVG mask. You can also switch the text in the mask to a path if you like. My advice would be to start trying things and see what works and what doesn't. The best way to learn is to start messing with code and see what breaks. Happy tweening.
  5. 3 points
    Are you literally trying to remove the ease from memory? You can do this: CustomEase.create("myEase", "M0,0 C0,0 0.056,0.442 0.175,0.442 0.294,0.442 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0"); delete Ease.map.myEase; But that's pretty much pointless. The performance of your app will improve 0.000000000%. Even if you have 10,000 different custom eases in memory, the performance difference will be negligible. When it comes to profiling animations, the main things you should be mindful of are rendering and painting times in the performance tab.
  6. 3 points
    Each is great, but having amount is actually insanely useful and solved a problem I was working through with dynamic content... can't wait for GSAP 3.0
  7. 2 points
    I have all I need for now, thanks I wanted the MorphSVG features but with the ablity to have vertices show up as dots. So the posts from @mikel are excellent for this thread, though not working with MorphSVG.
  8. 2 points
    Perfect, makes sense and helps! It looks like I was getting confused with amount as well, I was assuming it was the total time of the tweens + the stagger, and not the amount of time for just the staggers to happen. Your example or below works perfectly - thanks! .staggerFrom(".block", 0.8, {opacity:0, y:"50%", ease: Power1.easeOut, stagger: { from: "left", amount: 2 }}, null, "-=4")
  9. 1 point
    If you check the console you'll see that headingRedf is not the <h1>, but rather an object. This will make it move. tl[0].to(headingRedf.current, 1, { y: +30, }).to(headingRedf.current, 1, { y: 0, }); You're also getting a console error about exports not being defined. That's all I can offer with my lack of React knowledge. Happy tweening.
  10. 1 point
    I don't know anything about React, but what you have wired up there is returning an array for the tl variable. A timeline is the first element in the array and then a function. This seems to fix it. tl[0].to(headingRedf, 1, { y: +30, }).to(headingRedf, 1, { y: 0, }); Again, I have no knowledge of React so others will probably jump in with a proper solution.
  11. 1 point
    If you can post a demo with what you've done so far, I'll take a peek.
  12. 1 point
    thanks for reply @RolandSoos and @mikel. my code is working fine i will update shortly.
  13. 1 point
    Happy to help. Sounds like you've got it now. ? You can also use each: instead of amount if you need exact staggering durations for each element. Stay tuned for the next release of GSAP 3.0 when advanced staggering adds some fun new features. Happy tweening.
  14. 1 point
    Silly me. I had a transition node in the CSS for that element that I forgot was there. Perhaps a note to others with this problem, the transition parameters in the CSS will override the GSAP settings.
  15. 1 point
    How do you find these things?? It's impressive.
  16. 1 point
    Hello sharik and welcome to the forums, There are a few different ways to do this. I would recommend looking at GSAP's SplitText and our timeline. The core of it is: have an array of words that you want to change out. Make sure the there are <span>s or something surrounding all words that you want to replace (and replace with). After a certain amount of time, fade out the old word, place the new one in the DOM (without being visible), get the width of the new word and adjust accordingly, then fade in and slide down the new word. Then repeat that process as needed. Does that makes sense? Let us know if you run into any issues and we can help with those. Here's some more information about SplitText and TimelineMax. P.S. Are you sure you want to make a direct copy of that group's website? It does not make your company stand out if you are just copying another company completely. I suggest that you change things up a bit more. Maybe include things from other site's designs so that the mix the sites becomes your own.
  17. 1 point
    Try this: https://codepen.io/mm00/pen/qBWRWKY
  18. 1 point
    Wow! I've marvelled at the 'Tanks' ads I'd seen around; amazing work Volcanoflash! Must be fun as well. Here's my ads page >> https://www.andyfoulds.co.uk/banners/html5_banners/ BTW - I use Brave browser and ad-blockers on Chrome and many of the example sites here show-up as blank. When showing work on your portfolio it's a good idea to use the GSAP CDN links - rather than the Google or Sizmek hosted ones - remove any clickTags and ad-size metaTags. It's a pain but avoids a potential client seeing a blank square if they also have ad-blockers in place. Andy___F