Jump to content
GreenSock

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

hhkp

Members
  • Content Count

    8
  • Joined

  • Last visited

Community Reputation

0 Newbie

About hhkp

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Thanks, Zach. I'm gonna try to apply your option. The problem is to move to the next section because the section position in the fixed position and the sections are not lined up in a column.
  2. Hey, guys. I'm trying to do an animation using scrollTrigger. I'm trying to create an animation of several identical sections that have their own scrolling so that when one section finishes the animation then the scrolling page will go to the next section and play the same animation, etc. I really wanted to try out the scrollTrigger, but I'm afraid I don't have enough experience with it. Any help ... Thanks https://codepen.io/hhkp12/pen/vYLKXzr
  3. The main sections look like this.
  4. Hey, guys. Thanks to everyone who created this wonderful scrollTrigger. How about a few scrolls... scrolling in another scrolls ...there are three sections, and there are three more sections in the skin that need to be animated for the scroll. I'm sure ScrollTrigger can handle that, but what tips will be at the start... ? here's a example. ↓ example.mp4 ↓↓
  5. 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.
  6. 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 } ],
  7. 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.
  8. 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.
×