[ho i can pin a sub element on scrolling]

 

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

[ho i can pin a sub element on scrolling]

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.

 

 

 

 

[Responsive testing]

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.

 

[Responsive testing]

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.

 

 

[moving elements behind another]

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.

 

 

[Change backgroundcolor on scroll]

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.

[GSAP Integration to GRAV CMS]

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.

 

[Deployment to production]

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.

 

[Parallax Effect using Scroll Trigger]

A recent thread on parallax 

 

[Parallax Effect using Scroll Trigger]

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.

 

[Animation advice]

See the Pen yLOjjwy by rb1604 (@rb1604) on CodePen

[Animation advice]

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.

 

[Animation advice]

hi mikel,

that's a really fabulous response.

 

  

[Animation advice]

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.

 

[ScrollTrigger + Draggable]

Hello dznyc,

 

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

 

[Once scroll then cover the full screen section]

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. 

[Once scroll then cover the full screen section]

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.

 

[Once scroll then cover the full screen section]

hi again,

does this post help?

 

 

[Once scroll then cover the full screen section]

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.

 

 

 

[Is it possible to choose the start origin with MorphSVG?]

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

 

[Problem with DrawSVG, unexpected doted line]

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.

[ScrollTrigger - image stretching along the X axis]

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.

 

See the Pen qBZpMXo by rb1604 (@rb1604) on CodePen

 

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.

[stagger effect like magic scroll?]

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.

 

 

[Fix logo on top]

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.

[Fix logo on top]

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.