Shaun Gorneau

HI @Vineeth Achari, The example provided at hugeinc.com is pretty straight forward. At a basic level, you'll want to either kill the default scroll behavior, or contain everything in a parent element that has a height/width of 100% and overflow hidden. Then, whenever the scroll delta meets a minimum threshold, you can fire off a GSAP tween to move (tween the `y` property) of the stacked elements (each of those are also width/height 100% inside the container), -/+ the height of the a panel element. You'll want to detect if the user is at scrollTop 0 before allowing a tween +y to (reverse) ... and also determine if the scrollTop is at its limit ( panel height * (number of panels - 1 ) ) before allowing any advance (forward). Hope this helps. Shaun

A few problems here ... but I don't think the dots are an issue with DrawSVG or GSAP. I think it's just an issue with some of the SVG rendering out before the Javascript takes over. It's an SVG with a lot of data points. The second issue is you're trying to use DrawSVG on the SVG element itself, but DrawSVG work on paths, line, polyline, polygon, rect, and ellipse. https://codepen.io/sgorneau/pen/qBZbNEp Shaun EDIT: Whoops ... didn't see you in there Craig!

No need for ScrollMagic here... and with the new ScrollTrigger plugin, no need for ScrollMagic at all, period. If you want to tween text characters one by one, I would recommend looking at SplitText You could make use of ScrollTrigger here, but you can also just advance a Timeline's progress based on the scroll value. Example here, https://codepen.io/sgorneau/pen/WNrpWKZ

<Looks around> "Hey how many people have heard of GSAP?" <Sees hundreds of thousands of hands go up>

Came in to point this out but saw you were responding, Zach! +1

Hi @kmytor, It would really helpful for us (to help you) if you show this working or not working in CodePen. https://codepen.io/GreenSock/pen/aYYOdN With your code above it's really hard to know what is going on because either There is code at play that we are not seeing, or The code above is simply invalid

You're very welcome, @kf420!

Yes, defintely. It's a matter of somewhat reversing the logic and using a negated if statement https://codepen.io/sgorneau/pen/oNbgKzV?editors=1010

Happy to help, @Skafec!

The reason this isn't working is because you are tweening to 100% ... it's already at 100% ... So there is no change to tween. Using a from tween (from 0) it will build up to 100%. And the reason #arrow-line-left and #arrow-head-left are not tweening at all is because they have no stroke. DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse> https://codepen.io/sgorneau/pen/qBbELdQ?editors=1010

Hi @Skafec, Have a look at this CodePen to see how you can move an element to the top left corner ... also, clicking that same tile moves it back to its original position. https://codepen.io/sgorneau/pen/wvMBzoo?editors=0010 Happy tweening! Shaun

We definitely need to see a CodePen of what you’re doing and how your controlling it. loop isn’t something in GSAP, but repeat is.

Good to be around, @PointC! One of my favorite places to be! ?

Happy to help, @david_br! One thing I forgot to mention ... I changed the opacity property to autoAlpha because it takes into account a few things that opacity alone doesn't account for (like how "opacity: 0" still get's pointer-events, for example).

You're welcome, @Juc1!

Hi @kf420, pretty cool way of using ScrollTrigger! The only thing you have to change is the third toggleAction ... to play. Those toggle positions are Enter from bottom ... leave the top ... come back in from top ... scroll all the way back to before start https://codepen.io/sgorneau/pen/ZEQEqjb Happy tweening! Shaun

Hi Chris! Hmmm, a few more things for me to add here when testing in MacOS 10.15.5 Safari 13.1.1 Chrome 83.0.4103.61 Firefox 76.0.1 Edge 83.0.478.44 When resizing, onStart definitely fires for me (multiple times) in Safari, Chrome, Firefox. When resizing, onStart doesn't fire in Edge. onStart only fires once (for each start) in Safari, Chrome, Firefox. onStart fires three times on page load in Edge ... and then once for each real start. onEnter fires once in Chrome, Firefox ... but multiple times in Safari (when reversing to before onStart is called) onEnter fires once on page load in Edge (and that one time only)

Anything you can do with jQuery can be done with vanilla Javascript. In this case, look into https://www.w3schools.com/jsref/met_node_clonenode.asp

Hi @Juc1, The way I usually handle something like this is by cloning the first slide, appending it to the end, and allowing it to become the final tween before restarting the timeline. This gives a nice, seamless affect of an infinite stack. In my case, I'm using jQuery clone and appendTo to take care of this (because it makes it dead simple). The other thing is, I reordered the SVG <g> elements to be one, two, three (rather than three, two, one) to take advantage of the default stacking order. https://codepen.io/sgorneau/pen/gOPOeeY?editors=0010 Happy tweening! Shaun Edit: Also note that since you are using the same properties and values on each tween ... you can stuff those into the timeline's defaults and not have to worry about assigning them to the individual tween's

Hi @david_br Welcome to GSAP! Your code looks really good to me. Anything I would add would be more of a preference type of thing. What I show below might not seem too significant within the context of this example because we're talking about 6 tweens. But, in the context of dozens of tweens, you would see how these tips can help. I like to establish non-tweenable properties using .set() rather than as part of a to/from tween. I do this because it helps me see my "starting points" and more clearly see which properties I am tweening (later with to/from/fromTo). An example here would be transform-origin. If I find myself repeating properties, I tend to want to consolidate them to reduce repeating myself. An example here is where many of your tweens use the same ease. Of course, in this case, that's only 4 ... but in a larger context you might not want to type that over and over again. Lastly, a timeline is beneficial, even in this case, because it allows for better control of sequencing. Imagine this was 30 tweens and you changed the delay or duration value (or both) of the 3rd tween. All that follow would also need to be changed to accommodate this. With a timeline, I can stack the tweens and they will happen sequentially. If I need to make a tween start sooner or later than a natural flow, I can use the position parameter to start the tween either - later than natural ... maybe a half second later ("+=.5") - sooner than natural ("-=.5") - at an absolute value, here at 4 seconds (4) - at a defined position label, ("someLabel") - at a time relative to a label ("someLabel+=4") And if I change a duration and/or delay of any tween at any point in the timeline, all that follow will respect the relative positions. You won't have to recalculate. Also, because the entire sequence is a timeline, you have direct control of its progress() and can manipulate that (button clicks, sliders, mouse movement, etc.) Have a look at this CodePen where I do each of the the things above. One thing you'll notice is the commented out "add()" lines. They're commented to first show you the natural sequencing of the tweens. If you uncomment them, you'll see the timings you originally created using delays. And then (to see the real benefit) change the duration of your first 2 tweens to see how the following tweens fall into place without needing to change anything about them. Some things to note about the position labels I'm using. When you first use a label, it creates it at that point in the timeline. Any tweens that later use that position label have their position set to where that label was created. So, without the add() calls, I'm just creating the label and then the following tween is being set back to that label's starting position. They become "zero'd" out relative to each other. With the add(), I'm establishing that label at that point in the timeline and then assigning the two following tweens to that (now relative) position. It is in the add() that I'm able to use a relative position from the previous label to get the sequencing you achieved with delays. https://codepen.io/sgorneau/pen/qBbBpaz?editors=0010 Happy tweening! Shaun Edit: Lots of typos

@Violetta, This does appear to be a bug when passing in an object to toggleClass.

While I don't see a CodePen link in your previous post, (I see the CodePen in your original post ... didn't check there before I typed my response) I believe what you are asking is how can you generate a tween using element properties (in this case inline styles). The quick answer is, you won't be using inline styles. You can use data attributes to do something similar ... but I wouldn't. Not unless you know which specific attributes you want to tween and it's consistent across your tweened elements. For example https://codepen.io/sgorneau/pen/oNbvKyx Or, perhaps, passing in a full properties object, like https://codepen.io/sgorneau/pen/oNbNvNB?editors=0010 You would also want to think about whether you want these to automatically be appended to a timeline (as I did in my Pen), or whether they should be standalone tweens ... and how you would denote that. All in all, you're much better off defining the tween properties in Javascript alone, like this https://codepen.io/sgorneau/pen/oNbNvzw?editors=0010

Best bet would be to create a CodePen to illustrate what you are doing and what you are asking.

@gredesign Taking a look through the markup and inline CSS ... there's a lot going on there that probably shouldn't be there. If possible, it would be best to strip away the inline CSS on the videos and apply a simple rule set to ".home-video video" With all videos set to top: 0 and the negative margin-top removed ... things fall into place here just as they should. That said, I don't know where these inline styles are coming from (I didn't look further), but a clean up of the CSS should fix this issue. Edit: forgot to mention one thing ... Something that helps with placement of video is to set the video parent to a height of 0 and its (video parent) padding-bottom to the percentage aspect ratio ... in this case 56.25% ... that may have to be adjusted at certain break points. Edit 2: video to show how it responds to these CSS changes. damageEsports.mp4

@Vishnu Manda While I don't know what you're trying to show us with your included code ... a fairly simple method of adding motion blur would be to wrap the element, create another few instances of the element your moving and append them to the new parent, set each clone's opacity down (in CSS), and stagger there movement very tightly. https://codepen.io/sgorneau/pen/xxwNKPm?editors=0010