I am experimenting around with bricksforge and the MotionPath caught my attention!
I have a salmon that should go from the top of the page to the bottom of the page. I managed to make it work correctly from left to right. But from top to bottom it just jumps directly to the bottom and I have no clue what I am doing wrong.
I tried to watch some GreenSock tutorials and unfortunately I couldn’t transcribe it to use it in Brickforge.
This is just a wild guess but I think we’d need to be able to set another element as trigger as can we do with click or hover:
When it’s set to on enter viewport, we don’t have that option.
At least that’s how they did it here → https://codepen.io/vverma_27/pen/VwrZQNq where the trigger is the path and and the animated object is the item that’s supposed to move along the path.
Maybe use that codepen example to try n set it up using a timeline, instead of the animation controls.
Just looked at the example again and it seems the path as well as the animated object are contained in 1 single svg which makes it even more confusing haha. Maybe someone with more gsap knowledge comes along to help
The guess is wild! Still I think I am overseeing something, there must be a setting somewhere… Maybe there comes still a officisl Statement
In the meanwhile I’ll have a look at your Link and try to get it to work in the timeline. Will be a good training anyways to see how Brickforge works and get familiar with it!
The start and end trigger is based on the height of lil Mr. Salmon, it should be based on the height of the path, like in the codepen example.
Maybe try playing around with those values, maybe some extrem negative value for the end trigger could do the trick. Either way if you figure it out, feel free to post back how so I can steal your solution once I need it myself
Tried as well just now by wrapping another div around it but it still goes wild. It does technically work though, just very abrupt and fast due to the short distance between start and end. I am now more convinced than even before that we need to be able to select another element as trigger haha. Until then, I think the only way is to do it custom and/or via the timeline in the bricksforge panel. Unless of course there is a little hack to properly offset those start and end positions. I couldn’t find any so far
So good! I knew it was a small thing Thanks @Daniele
May I border you with another thing? I am completely new to the GSAP world and I want to know how I can use examples I find with bricksforge. The Tracktor example from @manc inspired me…
I would like that the salmon changes direction in which the scrolling is going. AutoRotate is activated but it actually doesn’t change the direction of the salmon. Where could be the problem?
And then the tractor has a certainChecking the codepen I would say that this is what makes change the traktor the direction:
I thought creating a timeline would do the trick, but somehow I don’t manage to get it to work. What would be the right approach? Here are the settings:
@phillencolin You’re mixing two different timeline instances here. This will not work. Instead, we should adapt the rules directly on the timeline instance created from the “Animation” controls. In the current version, there is no way to live update a value on scoll direction.
But… I’ve just added this possibility Check this:
With the next release (will publush a BETA today), you can create rules for such scroll direction changes and update the rotation in degrees as you want
@Daniele Thank you very much for your reply and at the moment this is all I need to know! Bricksforge will be part of my basic setup then… I like the global classes, pro forms, backend designer and I am eager to learn understand GSAP. This looks like really fun what you can do with it…
Still I think I am overseeing something, there must be a setting somewhere… Maybe there comes still a officisl Statement
