Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

11 Newbie

About iuscare

  • Rank

Recent Profile Visitors

873 profile views
  1. Hi @mikel & @GreenSock, spent another evening digging in and I think I am almost there. So far, many thanks for the help I`ve found in this forum. While other forums like stackoverflow unfairly stamps questions as stupid very fast, it seems, like everyone in this community is always polite and keen. I tried to get my head around my issue and I think it does not make much sense to keep the fading rate of the staggered items themselves consistence. If every item would have a fading rate of just 0.1ms, the speed between the staggering items has to be very fast. Basica
  2. Hey Jack, thank you so much for coming back to me. Your provided example is very close and I can already work with it. But you are right with your second thought you`ve thrown in: I am looking more into a way to keep the fading animations consistent and to accelerate the duration of the text staying opaque. Sorry, if I did not explain it good enough. May you give me some some hints or a working example (which would be suuuper awesome), where I can see what's going on to solve this, too? You'll find our NGO in your greensock membership soon Kind Regards
  3. Hi there, I am testing the splitText plugin on codepen before purchasing a membership. I`ve created an array with my text fragments and injected them with createDocumentFragment. I`ve then created a timeline within my for loop. This works well for animating my objects with staggerTo/staggerFrom. But I seem unable to find out two things: (1) How can I implement some kind of stagger "curve", instead of a straight line graph between the objects? I`ve already tried it with the customEase plugin and getRatio property but with no success. The animation between the stagge
  4. iuscare

    GSAP vs CSS

    Hi @OSUblake coming back to this thread. I am building a website with gsap, where I just dropped jQuery in favor of imrpoving es6 skills. Just read your opinion that toggling css class names is not a performant way and that you are storing them in an object or a variable. May you give us an example how you do this for a simple open/close menu button? All the best!
  5. Hello @Sahil, many many apologizes for my late reply. I was not at home the last few days. You are right, I looked up the docs. I did not use mouseenter and mouseleave cause I thought they were pure jQuery related, but they are not obviously. Thank you so much for that hint. So they are safe and ready for use in production just because of you two guys Thanks!
  6. Hey @PointC always to the rescue, thank you so much for giving me this input. I got it working. One problem persisted, because vanilla mouseover and mouseleave events also fire when hovering over a child element of the button, which is not intended, of course. I managed to get around by setting the pointer-events to none for those child elements and hope I won't cross browser incompatibility issues. Anyway thank you so much for your help!
  7. Hi there, I know this might not be a pure gsap related issue, but I hope someone can point me into the right direction. I want to avoid the use of jQuery and instead want to use pure javascript with es6 syntax. Therefore I created a button.js file, in which I want to create the module for my button animation powered by gsap. The jQuery version already works, so I simply have to translate this version into an es6 module but I am failing and keep getting "Cannot tween a null target". Obviously I am doing something wrong in the es6 syntax, but I can't figured it out Here
  8. iuscare

    Page Animation

    Hi there, I just saw this animation and was wondering if this or something similar is possible to build with greensock. I mean, for sure it would be somehow possible, but at the moment I do not know how to create this split width animation on the image. Normally I would try it with different divs, which animate their width von 0 to 100%. But with a background-image I do not know how to realize such an effect. Can anyone give me a hint? https://dribbble.com/shots/3561148-Cover-Animation
  9. Hello, I have a expanding searchbar by using TimelineMax. If you click on the icon, the categories should scale away and the searchbar should expand to 100% width. When click anywhere on the body element while the searchbar is opened, the timeline should play in reverse state. This already works as intended. My Problem is that the timeline reverse is being applied with every click on the body element, even if the searchbar is not expanded plus the timeline is being interrupted and being resetted when clicking on the body element while the timeline is being played. I tried t
  10. Hey Jonathan, thanks for coming back to me and your explanation. I just removed that line as you advised. By the way, thanks for sharing your original post with us. It saved me a lot of time. Don't even know if I had been capable to realize this animation without your code. Cheers
  11. Hello PointC, yes that makes clearly sense and it already works. I've updated the codepen demo. I implemented your advise on every tweening action, expect on the .set(el,{willChange:"transform"}) line. Otherwise I got an error. Is this intended and is the code clean enough in regard of performance? All the best and already thank you so much! Greetings are also contained in the codepen demo now
  12. Hello, sorry, I just forgot the pen, here you go: http://codepen.io/iuscare/pen/dpExzQ You can already see, what I am trying to achieve I'm happy to hear from you guys
  13. Hi there, I am trying to make some fancy hover action on my buttons. At the moment I have two buttons side by side and the animation already works as intended. Neverthless I have the problem that once I hover one button the other button animates aswell. I would like just to animate the button, which the user hovers. Could you check my code below, which is orienated on this topic (https://greensock.com/forums/topic/13384-timelines-are-objects-or-values/) and tell me where I am wrong? (function($){ var button = $('.irp_button'), a = $('.inner1'), b = $('.inner2'), c = $('.inn
  14. Hey Diaco, thank you so much for your answer, it worked well for me. It's so strange for an amateur, I've already tried that before, but was not able to get the desired effect. Seems that I had a syntax error or sth. like this, although the console did not grumble and the animation took place. Anyway, you made my day! This support forum is so great, where you can get help without worrying that you could annoy other people. Keep it up!
  15. Hi there, I am new to greensock and even to jquery/javascript at all. I am trying to scale the "g" parts of a svg element from 0 to 1. It already works but the elements don't stay in their end position when they are animating, but "move" in along the x and y axis. I am wondering if there is a way, that they stay fixed in their position and just scale from 0 to 1? I already searched the forum and found advises about transformOrigin, but none of them solved my problem.