Richard1604

here's an example of rotating about an origin not at the center.

Hello leenal, welcome to the forum. I’m sure that you will find it helpful. there are plenty of experts who know more than me and thats a very interesting example that you raise. i notice that you are using css transform and scroll trigger so I would be inclined to drop the css transform and do it all in green sock. I would also be inclined to make things simple and build an animation without using scroll Trigger as a starting point. the basic essence seems to be a simple rotation of a complex div about an external pivot point. Perhaps someone might have an example that they prepared earlier.

thanks Caitlin, that looks interesting. Here's a link to responsive typography article in smashing magazine https://www.smashingmagazine.com/2016/05/fluid-typography/ and a discussion about orientation and jquery https://stackoverflow.com/questions/40784487/rotate-mobile-screen-with-jquery-javascript that I mentioned above.

Hello all, just a general query as I haven’t find anything with a site search. i have been using google dev tools to test responsive layouts with its support for desktop, mobile, landscape, portrait and various specific mobile device sizes. i am also using Media queries and responsive font sizes plus a check on orientation. i am wondering what other options might be available out there and if there are any tips in general? thanks, richard.

Hello Kyle, welcome to the forum. im sure that you will enjoy it and find people very helpful. i recently did some circle animations and opted to use svg with some circles moving on a path. that way the circles centres can all be defined with the same cx And cy plus a radius And you can use various options to get direction (from, to, reversed, and Even path direction). i think that you can even do it with HTML by defining all the circles With elements at the same absolute position. one of the attractive points about the svg method is that The parameters can be defined as integers especially if you don’t mind doing a rotation to set the starting Position circles.

hi daniel, i just had a play with a copy of your codepen and it seems to be a lot better if you use hex values for your colors instead of names. I had a similar issue recently changing the background colors and that was the advice that I was given and worked for me.

Hello Joshua and welcome to the greensock forum. i don’t know GRAV CMS but is does look rather interesting so thanks for drawing attention to,it. given that you are new to both then I would recommend checking out the GSAP documentation and learning centre as well as the grav documentation which seems to be very comprehensive. as you say greensock treats a URL as a single page Whereas grav appears to let you Define css and js at a modular level. the obvious issue is to keep your files and variables with unique names so that they don’t clash with each other as you can potentially have dozens of animations going on at the same time. the greensock learning center has lots of videos and code pens that demonstrate the many plugins available and how to use them. I suggest that you start there and get back with a more specific gsap issue which the forum will be pleased to help you with.

Hello I am not quite there yet but I hope to soon be able to deploy a small trial web site to a production server. Obviously it is possible to use the cdn urls for the main gsap library but my question is about best practice with regard to premium membership plugins with a view to keeping access to the library secure. Is it ok to serve up the library or is there a better or more preferred method. I have seen some threads regarding obfuscation, minification and of course the license agreement but would value advice from the team and or more experienced members.

A recent thread on parallax

Hi, hello and welcome. there are lots of examples and demos https://greensock.com/docs/ You can also search codepen for scrolltrigger and the learning center has videos on introduction to greensock and scrolltrigger. these ressources are a great place to start and this forum is always very helpful if you have a specific question. i generally find that a google search is better than a website search but the docs are and resources cover everything that you might wish for. good luck.

https://codepen.io/rb1604/pen/yLOjjwy

Just a quick update @mikel, this has opened up an enormous avenue of potential animations which has blown my mind. i am currently investigating svg filters in general and experimenting with different parameters. i haven’t forgotten about my initial question but I really feel the need to explore the wider potential of what this can offer following your most Helpful suggestion.

hi mikel, that's a really fabulous response.

I’m currently looking at reproducing a background effect from motion tactic (dot) com. i have tried svg and discovered that it’s not optimal From a rendering perpective. the website seems to use a gradient png image and some masks (or sprites). there is also a subtle mouse movement effect. I am Definitely not looking for a solution to be provided but would appreciate discussion and suggestions on the general approach.

Hello dznyc, here’s a recent post which looks at scrolltrigger and draggable that might help you.

hi Narendra, yes there is a lot of code here. As I suggested earlier I advise you to look at the Greensock documentation and Learning center for basic examples on how to configure scrollTrigger. https://greensock.com/docs/v3/Plugins/ScrollTrigger You can also search google for "codepen ScrollTrigger" if you don't find the examples and demos sufficient. I always like to be helpful but I just don't have the time to build out a complex requirement for you.

hello again Narendra, I suggest that you read the ScrollTrigger documentation and look at the some of the many codepen examples which are available which include horizontal scolling, pinning and snapping.

hi again, does this post help?

hello Narendra, it looks like you are using the snap option in your scrollTrigger. You can find a full description of the snap option in the scrollTrigger documentation. I'm not sure what you want to achieve but you can either modify the snap or remove it as needed.

hello zeyi, that's a very nice animation that you are working on. i have a few simple suggestions that might be helpful: a) play the timeline in reverse: tl.reverse(0); b) reverse the direction of the path using an editor like Inkscape c) try using the progress() method d) switch between from() and to() methods

hello magicfred, welcome to the club. it's difficult to be certain without a codepen to look at but I had a similar problem when i first started using drawSVG and posted this thread if this doesn't solve your problem then please provide more detailed information so that we can assist further.

Hi mary, welcome to the club, i'm sure that you will enjoy it. Here is a very simple example of a stretch along the x axis with a scroll in the y direction. You can also pin, scrub or do a horizontal scroll if that's what you are looking for. https://codepen.io/rb1604/pen/qBZpMXo oh, btw if you want elastic then try adding one of the eases to the animation or even create your own custom ease as described in the documentation and learning center.

Hello and welcome to the club. Try reversing your timeline so that it plays backwards or even use the yoyo option. It depends on the context but you might also use scrub if your animation is using scroll trigger. perhaps you could post a codepen example of your animation so that we can see what you are doing.

Yes, if you checkout the timeline() docs The third parameter is time and you can set it in A very Flexible way. there is an article in the learning Centre with lots of information and examples.

Hi eddy, welcome to the forums. i understand you correctly you want to shrink and translate the logo and then pin it whilst the background is made transparent. What is currently happening is the logo is getting shrunk then pinned before it scrolls off the screen (without any translate tween). I see that you have defined a big logo in the css and decided to shrink it. I would be inclined to Invert this and define a small logo in the css and use from() tweens to shrink and translate it in place instead of a to() together with a pin for the logo defined in the scrolltrigger.