[scaling background image set size before scroll not working]

@mvaneijgen thank you, have removed that and still no joy.

Didn't realise you can't debug a live site, my apologies.

 

Haven't created a codepin before, so it's going to take me a little while to translate it over.

 

I suppose the easier question is...

 

Is there a way in the scrollTrigger js code to set the before trigger styles so it know what to tween from?  (if that makes sense).

[scaling background image set size before scroll not working]

Ah sorry, I'll try and create a CodePen now.

 

@mvaneijgen Sorry, not sure what your message means.

 

Thanks

Aaron

[scaling background image set size before scroll not working]

Hi all.

 

I've got an odd one that I thought I had working but it's stopped.

 

https://staging.dezarnaulds-design.com

 

The concept is that as you scroll down the background image on the right scales by 20% from 100% to 120%.

 

I've set the background size in css on the .home-header-right to 100%, then on the gsap I have this...

 

backgroundSize: '120%'

 

It did work - the image was @ 100% then got larger as you scrolled down, but for some bizarre reason, it now resets to auto as start hits the trigger.

 

Is it possible in the below code to set the before scroll styles?

 

gsap.to(".home-header-right", {
  scrollTrigger: {
	  trigger: ".home-header-left",
	  start: "top top",
	  end: "bottom bottom",
	  scrub: true,  
  },
  duration: 3,
  backgroundSize: '120%',
});

Thanks for any help!!

[animating margin-top]

Ahhhh, perfect, thank you Cassie

 

 

 

Learnt a whole new term today hahaha, been coding for 10 years, never heard of the term camelCase.

 

 

[animating margin-top]

Hi all.

 

Newbie here so apologies for the basic question.

 

I'd like to add margin-top to an element I'm animating, but when I use margin-top: '50px' it doesn't work - my error console shows...

Unexpected token '-'. Expected a ':' following the property name 'margin'.

 

What's the correct way to do this please?

 

Thanks in advance.

[re-using scrollTrigger]

No, just me being new to this and getting my head around the coding

 

Am still very green to scrollTrigger, so appreciate your pointers about scrub and toggleActions, was following the main tutorial and didn't see that bit removed when scrub was enabled, but learnt a lot today already!

 

Thanks both, getting the hang of it now

 

 

[re-using scrollTrigger]

You sir are a star, thank you for using my example, I now understand what you mean.

 

Have a good day.

[re-using scrollTrigger]

Yeah this is quite confusing, I don't suppose you know any good tutorials on arrays do you @SteveS ?

 

It's a lot more complex than I anticipated - but keen to learn this.

 

Thanks again!

[re-using scrollTrigger]

Amazing, thanks @SteveS - will give this a try now.

 

 

[re-using scrollTrigger]

Hi all.

Seriously newbie question here, but hope someone can help.

 

I've got a simple scrubbed scrollTrigger that expands a div when it scrolls into the viewport.

 

There's multiple divs of the same class as you go down the page - is there any way to use the same code for all divs?

 

gsap.to(".underlined .border", {
      scrollTrigger: {
          trigger: ".underlined .border",
          end: "bottom center",
          toggleActions: "restart pause restart pause",
          scrub: true,
      },
      duration: 2,
      left: '0',
      right: '0'
    });

 

Above is the scrollTrigger, and I'd like ALL divs with the class .border to do the same thing, but relative to when they each enter the screen.

 

Thanks in advance.