Richard1604

I wondered... this post has some basic clips and masks but as i mentioned the wavy effect is a bit more complicated. The best I can suggest is a MorphSVG clip based on a bezier path but I think that you really need more some expert advice.

Hello priyank, welcome to the club I’m sure that you will enjoy it. thats a great web site but it is also complex in the sense that different devices display the content in different ways using media queries and or gsap matchmedia. much of the site is done with scrolltrigger type animation and I see that there is a parallax effect and some pinning. on my tablet I also get a wave like reveal using a mask or clip effect. there is a lot to cover here. scrolltrigger and parallax effects are well covered along with some introductory videos in the learning section of the web site. i suggest that you take some time to look at the fundamentals but parallax effects can be done with a simple translation or a more recent post looked at changing the padding on an image with along with a scale. if you are interested in the wave effect then I think that @pointC is the expert on masking and clipping and he has posted various basic approaches but this one is more dynamic and advanced.

Hello art style, welcome to the club I’m sure that you will enjoy it. ive had a look at your animation and you seem to be using scrolltrigger and setting the duration in the timeline so your requirement to use pin and scrub seems to be at odds with setting times as the animation Progress is controlled by scrolling. i think that you will benefit by looking at some of the training videos under the learning section of the site which has a basic introduction, another on setting the time parameter on tweens and another on scrolltrigger. there are also lots of demos using codepen. when you have a better feel for the fundamentals it will be clearer as to whether you want multiple tweens using from(), to() or fromTo() or scroll trigger is the best way forward and we will be better able to help you.

Hello and welcome Jigar, I think that many of the effects you see on that site can be achieved with ScrollTrigger and (the scrub option). The carousel is also draggable which adds an extra level of complexity. I would suggest that you could start off by looking at the basic scrollTrigger docs When you feel confident with that then maybe consider the Draggable plugin. If you have a more specific question then I am sure that the forum will be pleased to help you.

hi Zach, that's brilliant thank you. I was considering changing my tween to be a from() instead of a to() but this is much better. PS, I will try to make my code tidier ;:)

Hello, I have been putting together an animation which has a stagger followed by a scrollTrigger script. If I comment out the stagger (line #15: tl.to(".rowx", {stagger: 0.25, height: "1" });) then the scrollTrigger script works as expected however if I include the stagger then scrollTrigger seems to have the markers in the wrong place. I have tried various combinations like refresh() to no avail. Please could you advise. Thanks.

Hello FirstAsianInSpace congrats on making your first post. That's a nice idea that you are animating with the squares and lines. I think that you might need to give the morph plugin a little help with mapping the points between the transitions. I wonder if you have looked at shapeIndex and the helper FindShapeIndex which are defined in the morphSVG documentation https://greensock.com/docs/v3/Plugins/MorphSVGPlugin Richard

Hi Rinku, that's a very interesting reference site. I think that you might be interested in a recent post that I made on a similar question

i think the above suggestion provides a general framework for moving dots around and disappearing in quantum jumps. If you want to make a dot appear or disappear then you can include opacity and change from 0->1 or vice versa. if a dot doesn't change position and has no other property changes then you might code an empty array entry and omit to make an animation for that object in the current state change. That is quite straight forward to implement in javascript. In a wider context, I am thinking that it is not too difficult to create a meta-programming framework that allows for timelines to be created using data stored in an array similar to my suggestion with the addition of verbose and debugging options and also the possibility of specifying the method to be used for the animation. I hope these thoughts will fire your imagination and inspire you.

Hello Jase, live looked at that site with several different devices and I can’t see anything that resembles your code pen. i did originally identify a hamburger menu with the effects that I posted yesterday but that’s obviously not what you are looking for. sorry I can’t be more helpful.

Hi, there are lots of nice effects on that site and I think it also depends on the device that is being used. im not sure that I understand exactly what you want to do. it may be that you need to use an event listener to trigger an effect (Eg. on hover) or perhaps you have a text effect in mind (a tween). it would be helpful if you could explain the context in a bit more detail.

Hi, I think that you need cursor effects and a masking effects. Try this for the former and I will get back with a link to the latter.

that's brilliant thank you. I can now see what I need to do to upgrade the others too.

Hello, i have been experimenting with the Draggable demos and I would like to upgrade them to the current version of green sock. In particular https://codepen.io/GreenSock/pen/xNaRZM is of interest with its Responsive, Draggable, Scrollable AutoSlider. It works fine when I use the gsap2 libraries and I am familiar with simple upgrades of Tweens and Timelines but in this case I get an error function updateProgress: function updateProgress() { animation.progress(transform.x / wrapWidth); } Uncaught TypeError: Cannot read property 'x' of undefined at updateProgress (gsdraggable2.js:65) I would really appreciate some general guidance on the process required to convert the old style demos to the current version. Thanks.

here's a simple example using an svg and an array to define the animations <svg id="circles" xmlns="http://www.w3.org/2000/svg" viewBox="0 -0 250 250" width="100%" height="100%" > <circle id="circle1" cx=10 cy=10 r=5 fill="red" /> <circle id="circle2" cx=20 cy=20 r=5 fill="orange"/> <circle id="circle3" cx=30 cy=30 r=5 fill="yellow"/> </svg> var tweens = [ ["#circle1", {duration: 1, x: 20, y: 20}, {duration: 1, x: 30, y: 30, delay: 1 }, {duration: 1, x: 0, y: 0, delay: 2 }], ["#circle2", {duration: 1, x: 30, y: 30}, {duration: 1, x: 40, delay: 1 }, {duration: 1, x: 0, y: 0, delay: 2 }], ["#circle3", {duration: 1, x: 40, y: 40}, {duration: 1, opacity: 0, delay: 1 }, {duration: 1, opacity: 1, x: 0, y: 0, delay: 2 }] ]; var i=0; j=0; for (i=1; i < 4; i++) { for (j=0; j < 3; j++) { //console.log(tweens[j][0], tweens[j]); gsap.to(tweens[j][0], tweens[j]); }} the animations are better on a timeline with default values but i think you can the general idea. FYI here's a codepen

Hi again, If you take a look at the post I referenced there is a codepen by osublake where the animations are parameter used. If you take the Json type format suggested by zach to parameterise your state changes you can code it all up as x, y and opacity changes. Another option would be to use a path instead of x, y variables which might reduce the number of animations.

Hey Carrie, split text is membership bonus for subscribers. when you join you can download all the source files and the bonus ones from your dashboard

my interpretation of the issue is that a parameterised tween would solve the problem. The above article about object names includes parameterisation of the tween values as well. In addition gsap.utils might be helpful along with the vars object and data. Just a thought.

That’s an interesting question. i found this article

Hello James, and welcome to the club. I am just a newbie but I think it has a great deal to offer and you will enjoy it. alpine.js is new to me so I have just read up on a background article and have some initial thoughts but your post is very short. i use bootstrap, have looked at react and vue.js and also flask and Django. my guess is that you are thinking about using alpine as a replacement for jQuery and it’s toggle method? I have so far found little use for jQuery and only use it sparingly and I am tending to prefer JavaScript or gsap util functions to control animations. at this point in time my personal feeling is that I want to improve my knowledge of greensock and JavaScript but of course I might be missing something about the advantages that alpine offers. perhaps you could expand on your post to explain more about what you want to do in greensock and what the advantages of alpine might be although I am sure that it is very capable of toggling classes if that’s what you want.

Try putting your ease value in double quotes...

1:44:01 PM: npm ERR! enoent ENOENT: no such file or directory, stat '/opt/build/repo/gsap-bonus.tgz' 1:44:01 PM: npm ERR! enoent This is related to npm not being able to find a file.

Hi mehmettemel, i have a similar menu with only one button and a toggle switch for state which uses this code: document.querySelector(".toggle").addEventListener("click", doCoolStuff); function doCoolStuff(event) { console.log("coolstuff"); toggle = !toggle; toggle ? action.play() : action.reverse(); } you might be able to use adapt this to your particlular needs.