DD77

Members
  • Content count

    52
  • Joined

  • Last visited

Community Reputation

1 Newbie

About DD77

  • Rank
    Advanced Member
  1. Gsap Slinky animation

    @Diaco hi Diaco, I managed to make a video of what I need, would it be possible to make it in gsap this slinky animation? - starts from standing and after one roll stops. Would it be possible? slinky.m4v
  2. Gsap animation waves and distorsions

    @Jonathan thanks, yes I've seen it, but not sure I can replicate that with a hover state. Is it possible with gsap? I've seen this from @OSUblake https://codepen.io/osublake/pen/WQyBJb?editors=1010 but still on hover? is it possible?
  3. I was wondering if anyone of you had a chace to see this website. I have a project which will require some of those effects. - play button which turns into a overlay? - the effect on the image? - the wave effect on the text? Would be great to see if anyone had a chance to creat or see something like it before? Or so kind to share some demo? http://taotajima.jp/works/itsuka-no-hoshi/
  4. Gsap Slinky animation

    Yes, Great work Diaco and lennco! I managed to use it and I managed to make it working with ScrollMagic:-)
  5. Gsap Slinky animation

    I'm trying to animate it with scrollMagic, and I'm struggle at the moment...
  6. Gsap Slinky animation

    I need to create a animation, I made a slinky demo in css that suit perfectly but is not a gsap build and I need it animated. I'm trying to replicate the same but I'm a bit far away. Could anyone help me to create this slinky animation? It should open up. Slinky demo My demo
  7. I have this tween1 that should should work on click and then reverse in case I scroll back. My tween doesn't work, the click doesnt play and so the reverse doesnt work, so: -on click toggle active which will make the f active will have tween1.reverse() //CLICK EVENT ON SECTION 2, AND WHEN SCROLLING BACK TO SECTION 1 IT SHOULD REVERT ALL var tween1 = new TimelineMax(); tween1.to(".click-element", 0.3, {className: "+=active", x: 500, paused: true }, 0) .to('#section-2', 0.3,{className: "+=darkblue", paused: true }, 0) $(".click-element").on("click", function(e) { $(this).toggleClass('active'); tween1.play(); }); var scene1 = new ScrollMagic.Scene({ triggerElement: "#section-2", offset: 50 }) .on("leave", function() { tween1.reverse(); }) .setClassToggle("body", "darkblue") .addTo(controller);
  8. @Sahil I appreciate there are roles for the forum, but in this case Gsap is the protagonist here. Specially on this function. I think I didn't explain myself properly. If you look at my demo, the click event should do the animation, and not scrollMagic. So this is GSAP. but yes, I need a to revert the animation once I scroll back, only if the animation is started... Does it make sense? https://codepen.io/davide77/pen/PEqvvX?editors=1010 Thank you for all your help.
  9. But on click it should reverse the animation, looks like it jumps. I've added but doesn't work. Also the animation should be triggered only by the click event, is just when I scroll back that is revesing.....:-( $(".click-element").on("click", function(e) { e.preventDefault; console.log('click') $('.click-element').addClass('active'); if($('.click-element').hasClass('active')){ $('.click-element').removeClass('active'); tween1.play(); }else{ $('.click-element').addClass('active') tween1.reverse(); } }); https://codepen.io/davide77/pen/PEqvvX
  10. @Sahil thanks, nearly there, that helps a lot. I need it on click, AND if I scroll back animation reverse. is it possible?
  11. @Sahil lol sorry I know:-) I'm a bit under pressure as I need to sort this functionality out. I made this so far, but looks like the .click-element is already taking the tween1 . I using alt scrollmagic site but this functionality is a bit tricky. https://codepen.io/davide77/pen/WdvWMd?editors=1010
  12. I need a click event on (section-2) which will do the following: - Page body changes background colour (adding class="darkerblue").- The main element (clickable) to move across x:500, scale:1.5. - if I click the main element it will revert all. -If I scrollback to previous scene(section-1) it will revert all. From line 93, where I started making the scene for section-2
  13. setTween Should be centered on pageload

    @Dipscom thanks for this. I know how flexbox works but still like you say doesn't fix the issues. I need to set a width somehow. COuld yu please help?
  14. have a look at line 48 please, any good?
  15. @Sahil almost there, as the image on the right should scroll to the left on section one, the image on section2 should move to the center once is animated. perhaps the .setTween(".title", {x: "28.5%", scale: 1, ease: Linear.easeNone}) has to change???