[Pinned section with inner scroll]

I am trying to pin a section, then while its pinned scroll its overflow. My codepen is close, but I am not sure how to calculate the y value of the element to scroll, so it is fully scrolled before the section is unpinned. 

See the Pen OJaqgYE by garethworld (@garethworld) on CodePen

[Update scrolltrigger end point on window resize]

thanks! that easy  

[Update scrolltrigger end point on window resize]

I am trying to fix a title until it reaches the section below. It all works fine unless I resize the window which can change the height of the title (if it goes onto more lines) and so the end position is now wrong. 

 

I am using the title height in order to position it correctly : 

 

 var titleHeight = document.querySelector(".project-title").offsetHeight;

Inside scrolltrigger:

  end: "top bottom-=" + titleHeight,

 

How can I update the titleHeight on browser resize ? or is there another way to set this value dynamically during the scroll so it always checking what the current height is? 

 

See the Pen zYLRjxv?editors=1010 by garethworld (@garethworld) on CodePen

[change time scale on the reverse of a tween (using yoyo) ?]

Thank you that works great. When you say it's a peculiar setup, is there a better way to do this? 

[change time scale on the reverse of a tween (using yoyo) ?]

I would like to play the reverse (text is deleted) at twice the speed of when it plays forward (text types in). Is this possible, prehaps using time scale somehow? 

See the Pen xxJqjKv?editors=1010 by garethworld (@garethworld) on CodePen

[Fade out pinned section using scrolltrigger]

Ah thank you!, I have updated and it's working great. 

 

Stupid typo! 
 

<div id="#content"> <--

[Fade out pinned section using scrolltrigger]

I am trying to have an intro section fade out using scrub as you scroll down the page (the viewport height) to reveal the next section under it. 

 

At the moment it is not pinning and the scrub does not work, where am I going wrong?

See the Pen yLqVvGp by garethworld (@garethworld) on CodePen

[Scrolltrigger how to pin to following section]

Great thank you, I used that + and offset based on the title height. 

[Scrolltrigger how to pin to following section]

I want to pin a title until it aligns to the section below. I am confused about how I can express this in the end value - is it possible to pass an element to the end value?

See the Pen abGemRN by garethj (@garethj) on CodePen

[Simple pin section]

yes sorry, was just about to mark as solved. 

[Simple pin section]

I am trying to keep a section pinned (fixed in place) while the next section is scrolled over it. 

See the Pen MWGMOWO by garethj (@garethj) on CodePen

[MorphSVG can't find shape index or change origin]

Hi,

 

I have a series of "A" shapes that I would like to morph between, they shapes are very similar to each with the same amount of points, but I can't get a clean animation, the cut out in the middle keeps flipping and the origin and shapeindex properties appear to have no effect. 

 

thanks!

See the Pen oNqyKJX by garethj (@garethj) on CodePen

[Split text along a path - letter spacing]

I am trying to animate type along a svg path. Thanks to some help from demos on this forum, I am very close to the effect I am after. 

 

The problem I have is the kerning (space between each letter ) is messed up. I understand this is because I am not allowing for the individual character widths within my start and end positions. Is it possible to access these within the forEach loop?

See the Pen jOmeadL by garethj (@garethj) on CodePen

[Blending svg stop colors]

I am trying to blend a linear gradient fill of a svg so it cycles through a few colors. The gradient looks how I want, but the tween feels very choppy. I know this is because of the way I have used stagger, but not sure what approach to take to make is color change smoother, but still have the gradient change from left to right?

 

 

See the Pen wvJWYXd by garethj (@garethj) on CodePen

[SVG linear fill tween multiple stops]

yes, sorry that's what I meant. 

[SVG linear fill tween multiple stops]

very cool, thank you - did not know you could loop a tween in a forEach like that. 

 

[SVG linear fill tween multiple stops]

@ZachSaucier Thank you for taking the time to explain how to code more efficiently with gsap, this is what I ended up with: 

 

const colors1 = ['#ffae65', '#ffd898', '#acaf9d'];
const colors2 = ['#110029', '#f61317', '#ffa600'];
const colors3 = ['#ffb72f', '#e1ceb7', '#8199ac'];
const colors4 = ['#ffb72f', '#e1ceb7', '#8199ac'];
const colors5 = ['#ffb075', '#ff8c73', '#e0508c'];
const colors6 = ['#ffb075', '#ff8c73', '#e0508c'];
const colors7 = ['#00f050', '#00f050', '#00f050'];


const gradTl = gsap.timeline({defaults: { duration:1, stagger:.2,ease:"Power4.inOut" } });

gradTl.to("#gradient stop", {keyframes: [ 
  {stopColor: (i) => colors1[i]},
   {stopColor: (i) => colors2[i]},
   {stopColor: (i) => colors3[i]},
   {stopColor: (i) => colors5[i]},
   {stopColor: (i) => colors6[i]},
   {stopColor: (i) => colors7[i]}
]});

gsap.from("#sun", 10, {y:200,ease:"Power4.inOut"})

 

The bit I am still unsure of is how to loop through the colors arrays in a timeline tween. 

[SVG linear fill tween multiple stops]

thanks! this helped me a lot:

 

See the Pen dyOXBQK by garethj (@garethj) on CodePen

[SVG linear fill tween multiple stops]

I am trying to transition a fill of a svg shape through a few different gradients. At the moment I have it working so the shape changes to the same new color for each stop, but is it possible to change each stop color independent ? Thanks! 

See the Pen WNoxoLP?editors=1010 by garethj (@garethj) on CodePen

[Lifecycle of a timeline in ajax site]

I have a site with ajax page loads (using highway js). On one of the pages I have a looping timeline tween.

 

Should I try and kill this tween on page exit or is it killed anyway because the elements are removed from the dom? I reinitialise it on each page visit. 

[Random values on each timeline repeat]

ok wow, so simple - thank you ! 

[Random values on each timeline repeat]

Is it possible to refresh random values on every repeat of a timeline?

 

I have the the random values on each tween creation, but it just loops the same values.  

See the Pen BaLyqbb by garethj (@garethj) on CodePen

[Change snap back / forward point]

thanks so much for having a go at this, but I actually meant the amount of drag it takes to go the next snap point.

 

In my demo you will see you have to drag the next div past the red line or it snaps back, I was hoping you could move halfway towards the line and then it would snap forward. 

[Change snap back / forward point]

I have a x draggable with snap points working well, but is it possible to change where the snap is triggered from ? At the moment you have to drag past the central red line in my demo, I would like to trigger the snap forward earlier - 50% from the line.

See the Pen zYKxpMg by garethj (@garethj) on CodePen

[Add a pause between paragraphs with splittext]

wow! thanks so much, works perfect