Jump to content

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


  • Posts

  • Joined

  • Last visited

Antonio78's Achievements

  1. I am familiar with this article but will definitely have to read it again. I have another question, just out of curiosity. At first I make the logo fade in with a css class, but then I make it fade out with a gsap action. I usually do it this way: what can be done with css I do with css, what is more handy to do with gsap I do with gsap. Is it wrong to use this kind of mixed technique on same elements?
  2. Thank you PointC, this seems to work. Just one question, is this the way it is supposed to work? I mean, the tween should start only when the trigger passes the starting point, it should not be necessary to use immediateRender:false. If I add an onComplete event, it starts right after the page loads, so I assume that the tween starts anyway sooner than it should. Is there something I'm missing?
  3. Here is the pen. As you can see there is a #logo_header that starts already faded out because of the animation: gsap.to('#logo_header', {duration: 3, autoAlpha: 0}). https://codepen.io/antoniostarace78/pen/poppOdR
  4. Hi OSUblake, It's not easy to provide a demo but I can show you the website, hope it helps. The #header_logo element should be hidden at start, then become visibile after 200px scrolling, then fade out when #logo_footer enters the viewport at 80%. The code is in main.js at line 196. Thank you.
  5. Hi, I've been trying to do a simple scrollTrigger action: an elements that enters the viewport makes another element fade out, that's it. But this time the action starts on page load and not when my triggers pass the scroller-start. This is my code. I tried to set a longer duration to see what happens but the #header_logo starts at opacity 0 without tweening, as If I had set gsap.set instead of gsap.to. Do you see anything wrong with my code? Thank you. ScrollTrigger.create({ trigger: '#logo_footer', start: 'top 80%', end: 'bottom 20%', animation: gsap.to('#header_logo', {duration: 1, autoAlpha: 0}), markers: true })
  6. Your solution does not seem to solve my issue but it gave me a good hint. I changed my code in this way .to('#navigation', {duration:0.01, 'pointerEvents':'all'}) .addLabel('pause_menu') .to('#navigation', {duration:0.01, 'pointerEvents':'none'}) This seems to work as I intended. Thank you.
  7. Hi, I can't make this animation do what I want it to do, I can not understand why. I have a button that calls function menuAnimation which plays my timeline, based on condition whether variable is_menu_active is true or false. My problem is that the tween from START_MENU to PAUSE_MENU skips pointerEvents:all, does not stops at label ''pause_menu, then goes to the next step pointerEvents:none. What is wrong with this code? Thank you. btn_menu.addEventListener('click', (e) => { e.preventDefault(); menuAnimation(); }); var tl_menu_animation = gsap.timeline({ defaults:{ ease: "power2.inOut" }, paused:true }); tl_menu_animation.addLabel('start_menu') .set('#nav_left,#nav_right', {autoAlpha:1}) .to('#nav_left,#nav_right', {duration:0.7, scaleX:1}) .to(nav_elems, {duration:0.4, autoAlpha:1}) .set('#navigation', {'pointerEvents':'all'}) .addLabel('pause_menu') .set('#navigation', {'pointerEvents':'none'}) .to(nav_elems, {duration:0.2, autoAlpha:0}) .to('#nav_left,#nav_right', {duration:0.4, autoAlpha:0}) .set('#nav_left,#nav_right', {autoAlpha:0}) .set('#nav_left,#nav_right', {scaleX:0}) .addLabel('end_menu'); function menuAnimation() { if(is_menu_active) { tl_menu_animation.tweenFromTo('pause_menu', 'end_menu'); is_menu_active = false; } else { tl_menu_animation.tweenFromTo('start_menu', 'pause_menu'); is_menu_active = true; } }