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.