Winslow

Nope your right on point!! My each loop tween seemed to be tweening all sections at once and not for each so after the first panel the remaining 5 entered the viewpoint at position 100%. I play with this and the other ideas you stated above. Thanks. Appreciate the help !!!!

I am trying to animate the position of background gradient while horizontally going thru panels. No matter how I try it "seems" to apply the tween to all the panels at once not each individually as they occur. Of course the first one is perfect. The gradient is supposed to kick in as the current panel is leaving and the new panel is arriving. I am trying to animate the gradient position at about the 50% mark as the panel leaves. Like I stated the first one works well but all the rest have their gradient at 100% when they arrive. I have tried several scrollTrigger configuration, with a timeline, just tweens without a timeline, scrollAnimation, without scrollAnimation. I just can't seem to get the each to work. Can someone point me in the right direction or point out my problem (I have this feeling its elementary and will be sorely embarrassed) . Regards Win

Well, yeah, hard to get it to work without it loading. I wasn't getting the markers so I knew something was up however I had no errors in the console. Being a newbie for front end , where would you look to see that scrolltrigger, jquery didnt load? I was getting the tweens so I didn't think to look. As for body, I tried header plus anything else, and again, loading helps a little. and for scrub, I have some parallax working elsewhere with scrub:2 and I like the way it makes one of the sections kind of glide so I just threw it in there. All that being said, I really appreciate your help and thoughts, trying to learn ScrollTrigger, GSAP, ...+ without being well ensconced in HTML, CSS, and JS seems to be hard on all of us. It's very helpful that you explain the what not's and why to for's. I believe I can get this working now with your example and explanation. thanks again.

OK, so ScrollTrigger is up and running. I cannot for the life of me get this to execute on scroll. No matter what I try as the trigger and/or start, the tween executes immediately without scrolling. Have a codepen but cannot insert it here. https://codepen.io/B0nef1sh/pen/gOPMOxW

Yes this is how I started but was wanting to "fade" it in. Starting out with no visibility to the last img and then getting brighter and lastly maybe adding blend mode screen, scaling, filter . I tried filter brightness, opacity, and like I stated, adding the last image in via JS but cannot figure out how to gradually increase. The current setup just reveals a "turned on" light. Regard

I currently have two full viewport background images of the same light bulb so when you scroll with fixed position it looks as one. However I have a third image that I overlay "making" the light come on. I have spent many hours researching different animations (opacity, which kind of works however I then got into keyframes, Brightness filters, and currently trying to actually add the background image via JS.) I found a logo with kind of "metal" sparkle, flash animation which i tried however it used a lot of perspective and it would take me lot's of time to fine tune the detail for my situation. I would just prefer starting the image without any "light affects scrolling headings up and gradually brighten as you are scrolling or over time. If someone who may have accomplished this or something similar might be willing to give some advice on animating this I would be forever grateful.

Hey thanks, appreciated very much. The less plugins I can use the better. I've been working this off and on for quite a while but never getting it smooth. This should work nicely! Tween on!

Evening all, I have had this working in several forms however most all have a brief moment of jitter. Once past "the point" the first time, it works smoothly as planned and I can scroll back and forward properly. Warning!!!! scrollmagic in use and I have read the posts of both the haters and the lovers and I understand both positions. I'm searching for a solution. Using scroll to shrink a full viewport background down to the height of the navbar which is the following element. So I am tweening the background height down to the height of the navbar. Both should end up at the top of the page pinned with the height reduced background behind the navbar. In addition, a heading, in the center of the background div, also get 's pinned at the top. I've tried different arrangement of div's, triggers, durations, etc. It starts to reduce the background height and then flashes and the height goes up and down. This simplified codepen can't get past the issue however as stated above, I can on my loaded copy and once past the initial issue it works properly. Any insight would be welcome. Regards

Thanks, I got cross eyed looking at it. ?

Just cannot figure this syntax! Quotes, no quotes, before comma, after comma, color first, color last, no comma.... Can't find any examples of shadowing with multiple values. Anyone take a peak and enlighten me. Codepen attached however this statement errors out so it is commented for the time being. I have it in CSS but prefer to add and remove classes. Thanks, This is the textShadow: var shadow = "0 1px 0 hsl(43, 35%, 47%), 0 2px 0 hsl(43, 35%, 40%), 0 3px 0 hsl(44, 35%, 35%), 0 4px 0 hsl(44, 35%, 30%), 0 5px 0 hsl(44, 35%, 27%), 0 6px 0 hsl(43, 35%, 25%), 0 7px 0 hsl(42, 35%, 23%), 0 8px 0 hsl(42, 35%, 21%), 0 0 1px rgba(162, 138, 78, 0.05), 0 1px 3px rgba(162, 138, 78, 0.2), 0 3px 4px rgba(162, 138, 78, 0.2), 0 5px 5px rgba(162, 138, 78, 0.2), 0 10px 6px rgba(162, 138, 78, 0.2), 0 20px 7px rgba(162, 138, 78, 0.3)";

Hey thanks, I appreciate it!!! Nice and concise!

ok, now that this is done (simplifying in codepen corrected my issue as mentioned in the doc) and many iterations later... I have the text scaling up, fontSize, height and even (super) text shadowing (not in this code pen). The question now is "best way to add 3D perspective" to this. I came up with a formula to apply Y rotation to each char proportionally so that less scale occurs in the middle and more on the ends. How do I incorporate chars{i} processing so I can compute a factor to use for scaling in the standard gsap.to processing . gsap.to(split.chars, {scaleY: (factor * 5deg)} where factor = (centerIndex-i). I have 13 or so characters in the title. I might even use proportionality for the scaling. Will a (for) loop produce the same as gsap.to(array)? I'll play with it for a while and see. If there is a better way I'd appreciate some insight. Regards

Trying to get an additional splitText animation in and somewhat confused on what the defaults are and also what the correct process is for visibility, opacity, and autoAlph. I have read most off what I could about this but still unclear. My current situation seems to have mixed attributes in the Chars div. The first char is absolute, hidden, opacity:0. The remaining are inherit but various ranges of opacity from 0 to .8 and I am not even using opacity. Also is absolute the default position? Of course it's late, I've been at it way too long, and I just can't seem to quit tinkering with my animations. Everytime I read more the more I want to do. Oh well, if and when I (we) are quarantined I'll have plenty to do. Regards Added Codepen and like stated, my troubles went away. What I am trying to do is add an animation at the end of another, to make it look like taking a breath, expanding and deflating. What I have now is just the expanding portion but it would not be difficult to reverse it. How would I make the letters on either side expand less than the middle ones? I am using splitText because the other animation uses it and it's available and not opposed to using something else. I might be able to change the tween amounts to variables based on position and use the char array to tween each char??? Thoughts?