Richard1604

hi josmanolo, That’s a cool site isn’t it. I noticed it myself in the show case a few days ago too. I think that after the initial splash screen much of the site is based on scrollTrigger and there are a couple of hamburger menus in there too for navigation. there’s a good intro video for scrollTrigger which is about 20mins long and if you do a Google search for scrollTrigger There are quite a few codepen examples around which might get you started. scrollTrigger can handle horizontal and vertical scrolling too if you want a horizontal image gallery. that ought to help get you started but there is a lot of detail in that reference site with plenty of different transitions and animation effects.

Hi Ryas, it would help if you could post an example of your problem in a codepen but looking at your code it seems that you are trying to mix tweenlite (an old version of green sock) with gsap3.timeline() and scrolltrigger() - a recently added plugin. there are some instructions on how to create a codepen and if you look in the docs you can find the differences and how to convert tweenlite to the more recent gsap.to() from() and toFrom() methods.

Hello riyas, I was looking at The scrolltrigger demo this morning Which is about 20 mins long and about three mins in (after the demonstrations) there is a nice example where a box is animated when it comes onto the screen. obviously all your elements are Already on the screen and at the top but... by extension I think that you could pin the top section and trigger The animations when corresponding trigger elements are scrolled onto the screen. its worth looking the demo. Another possibility is here where the progress of a timeline is determined by the scroll position. there are probably more exotic possibilities too that the experts can suggest.

I'm getting a bit carried away here but to give a flavour of what i am thinking of - you can define a family of circles which all have something in common (eg going through the same two points) by parameterizing their equations. It starts to get really interesting when you find that every family of circles has a (unique) family of circles such that every circle in one family intersects every circle in the other family at right angles. If anyone is interested i have a collection of very old geometry books I can share that are full of wonderful theorems. I am certain that svg and greensock plugins can produce some fabulous dynamic effects.

SVG is definitely on my to do list and it is certainly not trivial. i am of an age when some" interesting" geometry was still still taught at school (at least in the UK) and I rather fancy looking at the conic sections and coaxal circles which ought to produce some stunning stuff.

It's been a another very long and enjoyable day on my journey with Greensock today. It began at dawn and here I still am at midnight when it's very hot and the air is still. Each day when I am free I set myself several objectives and try to find new ideas, examples that have been posted and attempt my own solutions. Today I created a text effect which seems to very popular (but apparently not always implemented responsively). I am also working on an effect that creates images based on the coordinates of the cursor but that's still a work in progress. Much of today was to create what I thought was a simple text effect which has proven to be somewhat enlightening. Image a black div on a black background. A white div appears from the left and fills the target window area. This is followed by a black div coming from the left again and reveals a text. Simple? I thought that this was easy how wrong I was. My own initial attempts were frustrating so I found this slider on Codepen. I managed to strip the code of unnecessary clutter and make it "work" only to discover that the text was sliding in from the left instead of being positioned statically as I intended. The text can easily be revealed from underneath using opacity but I still felt that there was too much code for a "simple" requirement. I later found this thread. and a few others which gave me lots more ideas which I will experiment with later. The key learning has been that (apart from the fact I have much to learn) there is not one but many possible ways to implement any given animation. The one that I am working on could be a slider or equally well change the width of a div then change the width of another div (or two) Just as in the days when my mathematics was good - I am free to choose my coordinate system & and then choose my axes. There is nothing stopping me changing my axes again. As Einstein wisely said - everything is relative! Not looking for an solutions as this post is a reflection on my learning experience but maybe it will inspire others or even generate some comment.

seems to be back again now; there is a trade off as regards hosting js files yourself and using a cdn. generally speaking the cdn is better as it reduces load on your web server but the downside is a very occasional loss of service.

Looking at the docs I see the timeline() method has addLabel() and addPause() methods So your requirement ought to be achieved if you create a label and program a pause on the timeline with the button being set to do a resume()

I just got back to this again zach and re-read your comments. I like you suggestions and will follow them up. Thanks again.

Hello zach and thanks for looking at this and responding. i updated the codepen earlier after my first post and it now does what I had in mind, or at least a simple version of it. i can now see how to structure a much more complex animation by creating the content and hiding some of the elements using css and classes/ids so that they can be animated later using scroll trigger or whatever.

it's amazing what happens given a little bit of time. I have updated the pen to hide the some of the elements again after revealing the main page....

Hello lalaland. I'm a newbie too and I like your question so I will share my initial thoughts - although your requirement is pretty vague. You can create objects on the screen by adding eg <img> tags using a bit of javascript or even jQuery with: $(".enter").after("<img id='" + id + "' src='" + url + '">') The big question is how to organise the location of the images and several approaches come to mind: you could use mouse events to trigger the new images or generate random co-ordinates using the random function and clamp the position to restrict the values to be onscreen; another possibility might be have a rectangular array and fill in the images at random. Some example code on mouse events can be found here A GSAP timeline could be used to manage the bigger picture and eg) to animate and/or hide/remove elements after a period of time.

I'm starting to have fun using greensock now that I have a little experience so this morning i have been working on a slightly more complex animation. The 'plan' is to have a splash screen and after a delay to transition to a main page which was initially hidden. After than I would ideally use ScrollTrigger to animate the sub elements onto the page. My query is how to organise the main page content to facilitate this as what I currently have displays all the content I reveal the div. Not looking for any code, just advice on strategy and how to organise it all.

Ok thank you for the insight zach. much appreciated I will check out hammer.js

I'm continuing to research and learn how to animate with GSAP and today I have been attempting to reproduce something on a new site that I have noticed here The site seems to work better in some ways on an ipad yet scrolls much better on a PC and consists of three columns of images which move in different directions as the user scrolls. My attempt in codepen has captured the initial load but after that I have been looking at ScrollTrigger and I can't see how triggers will solve the problem. I have considered connecting the scroll bar to to a timeline animation but there is still something missing. Any advice gratefully received.

Many thanks! That's another thing that I have learnt today. My CSS and javascript are rapidly improving and this solution is widely applicable. Thanks again.

Hello again, I've had another very enjoyable day delving into the depths of GreenSock looking at the excellent examples and questions that people have posted. I have a very simple query which seems to be recurring in several places: concerning initial behaviour when an animation first starts up. the above code pen is a variant of something in the basic documentation and it works perfectly in the code pen... however on my PC using chrome as a browser I notice that at the bottom of the screen there is a scroll bar (indicating that the screen is wider than window). The scroll bar "adjusts" itself every time one of the boxes enters the display area and then disappears for the duration of the animation as it repeats. As I said, the phenomenon does not happen in the code pen however it is real and I could post a screen shot if that possibly helps.

Thanks all for your helpful comments and indulging my general non-specific question. I've only been looking at GSAP for a couple of days and it is already coming together. The API is very well documented and I am finding myself coming up with more and more creative ideas so at the moment the dominant thought is how to integrate and put all the different pieces together. Perhaps not the easiest approach for you to answer but if i get my thoughts organised early then I feel that it will save both you and me lots of time!

thanks very much for this very helpful response. I now take it that jQuery is not deprecated and I can happily use it without having to find a good resource that focuses on the every day grunt work of manipulating the DOM and listening for events!

Hello, i have just started looking at Greensock and happily learning from all the examples that are out there while setting myself targets to reproduce or clone some excellent sites. my first question is regarding jQuery and JavaScript 6. it is obvious that jQuery now has a limited future and JavaScript is now much more mature so my question is should I still be using jQuery or is there a respected book that covers how to transition from jQuery to JavaScript which focuses on the nitty gritty instead of aspects that i realistically will never need.