Jump to content
GreenSock

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

hhkp

Members
  • Content Count

    4
  • Joined

  • Last visited

Community Reputation

0 Newbie

About hhkp

  • Rank
    Newbie
  1. https://codepen.io/hhkp12/pen/MWWQOOW This is an example of the animation that I need, but on the site it works twice in a row, and every time I scroll it, it starts again. maybe I'm calling GSAP in the wrong place.
  2. I do not use ScrollMagic Unfortunately I can’t demonstrate this in codpen. here is the code of my function, maybe this will help to understand what I'm doing wrong. and every time I scroll the SVG element starting animation instead of losing once and waiting [ function (a, b, c) { var d = a ( "./utils/isInViewport" ) , e = a ( "./utils/throttle" ); a ( "./variables" ).init (); var f = $ ( ".section" ) , g = $ ( ".trigger" ) , h = $ ( ".viewport_animate" ) , z = $ ( ".tech_specs" ) ,i = function () { h.filter ( function () { return !$ ( this ).hasClass ( "animated" ); } ).each ( function (a, b) { d ( b ) && $ ( b ).addClass ( "animated" ); } ) } , j = e ( function () { winHeight = window.innerHeight, f.each ( function (a, b) { var c = b.getBoundingClientRect (); c.top > winHeight ? ($(b).find(".scene").removeClass("active"), $(b).find(".scene").removeClass("ended")) : c.bottom < 0 ? ($(b).find(".scene").addClass("ended"), $(b).find(".scene").removeClass("active")) : (c.top <= 0 && ($(b).find(".scene").addClass("active")), c.top > 0 && $(b).find(".scene").removeClass("active"), c.bottom <= winHeight && $(b).find(".scene").addClass("ended"), c.bottom > winHeight && $(b).find(".scene").removeClass("ended")) }), s = (function(){ var w = document.querySelector('#btn_big'); var tlz = new TimelineMax({paused:true}) .fromTo(w, 2, { y: -50, opacity: 0, ease: Power3.easeOut }, {y: 200, opacity: 1, ease: Power2.easeOut},'+=3'); if ($(".bike_image_wrapper").hasClass("active")) { tlz.play(); } else{ tlz.invalidate(); } z.each ( function (a, b) { var c = b.getBoundingClientRect (); c.top > winHeight ? $ ( b ).find ( ".bike_image_wrapper" ).removeClass ( "active" ) : (c.top <= 0 && ($ ( b ).find ( ".bike_image_wrapper" ).addClass ( "active" )), c.top > 0 && $ ( b ).find ( ".bike_image_wrapper" ).removeClass ( "active" )) }) }) , g.each ( function (a, b) { $ ( window ).scrollTop () >= $ ( b ).offset ().top ? $ ( b ).data ( "selector" ) ? (section = "." + $ ( this ).data ( "selector" ), $ ( section ).addClass ( "active" )) : $ ( b ).parent ().addClass ( $ ( b ).data ( "class" ) ) : d ( b ) ? $ ( b ).data ( "selector" ) ? (section = "." + $ ( this ).data ( "selector" ), $ ( section ).addClass ( "active" )) : $ ( b ).parent ().addClass ( $ ( b ).data ( "class" ) ) : $ ( b ).data ( "selector" ) ? (section = "." + $ ( this ).data ( "selector" ), $ ( section ).removeClass ( "active" )) : $ ( b ).parent ().removeClass ( $ ( b ).data ( "class" ) ) } ) }, 1e3 / 60 ) , k = { init: function () { $ ( window ).on ( "scroll", i ), i (), $ ( window ).on ( "scroll", j ), j (), $ ( window ).on("scroll", s ), s () } }; b.exports = k } , { "./utils/isInViewport": 18, "./utils/throttle": 20, "./variables": 22 } ],
  3. everything is correct, since the active class appears by scrolling, it affects the animation every time you scroll. but I need the animation to lose once with an active class.
  4. Hello, friends don't take my funny question strictly, I'm just a green newbie. Inside My element, which becomes active during scrolling, is SVG, and I try at the moment when it has an active class to animate SVG. How do I tell GSAP when to start an animation? Thanks in advance to all V.
×