"how it works" effect similar to strapi site

[devopstoday11]

@tfsojon
I want a similar effect on our home page as described in the video. When you finish the work, only do PR to "chandu" branch. Please don't use the main branch.

https://www.loom.com/share/b2e347ac489e48e48dc906391d285b5f

[devopstoday11]

@tfsojon are you working on this?

[tfsojon]

@devopstoday11 will work from today!

[tfsojon]

@devopstoday11 Updated how-it-works section. Check the style. not make possible the exact same interaction.

[devopstoday11]

@tfsojon, where to check? I don't see any links in your message.

[devopstoday11]

@tfsojon , I didn't understand what you said. Could you please elaborate?

[devopstoday11]

How can you make it possible to have exactly the same interaction as Strapi? What needs to be developed for my site to make it happen?

[tfsojon]

@devopstoday11 here is the pull request #41
check the preview locally in this page - http://localhost:1313/how-it-works/
Strapi's animation is made with GSAP. Which is a club membership plugin https://greensock.com/club/
Also need to invest more hours to made this animation.

[devopstoday11]

@tfsojon please develop the exact effect using javascript. We don't want to depend on external plugins.

[devopstoday11]

I checked the sample you did, it's not similar to Strapi. I want exactly same as strapi but by using javascript, since in the theme you already used javascript, better to stick with it.

[devopstoday11]

@tfsojon In Strapi, I do understand that they used animation. But for that simple effect, animation is not required. Using Javascript same effect can be done. No need to overload the site with unnecessary plugins and unnecessary animations.

[devopstoday11]

@tfsojon
example, javascript based effects/animation - https://michalsnik.github.io/aos/ , https://github.com/michalsnik/aos

https://www.digitalocean.com/community/tutorials/implementing-a-scroll-based-animation-with-javascript
https://github.com/lmgonzalves/scroll-based-animation

[devopstoday11]

@tfsojon
https://levelup.gitconnected.com/how-to-create-frame-by-frame-moving-image-on-scroll-effect-30ce577c63c2

[tfsojon]

@devopstoday11 the strapi animation is not an easy left right position changing.
It depends on window-height, content-height, window-position, container-position and lot of other stuff's;
and the animation made with GSAP animation library.
I tried again with plain javascript and couldn't make it smooth as like strapi.

Now, what I did in the previous pull request, do you want to keep it or should I remove the animation.

[devopstoday11]

@tfsojon please remove the previously added sample. Don't want that.
are there any free animation libraries to use with hugo & javascript?

[devopstoday11]

@tfsojon Lottiefiles animation is free.
https://help.lottiefiles.com/hc/en-us/articles/4887671268249-Sync-Lottie-with-scroll
https://lottiefiles.com/interactivity
https://www.youtube.com/watch?v=LVyiXWmu-zY
https://www.sliderrevolution.com/tutorials/how-to-design-a-scroll-animation-on-your-own-using-lottie-tutorial/
https://codepen.io/mertmayda/pen/zYvPQQo
https://university.webflow.com/lesson/animate-while-scrolling

[devopstoday11]

@tfsojon
I already talked to Sharif. He said he will ask you to work on the website without pausing the work, going forward. Hope you got that update?

[devopstoday11]

@tfsojon
If strapi kind of effects/animation is going to take too much time for you to figure out and develop, how about these two sites reference?

https://smallstep.com/
https://katalon.com/

I am thinking of having layouts, animations, effects similar to those two sites.
Idea for layout is, our site’s Home page would have combination of both the above sites , and the projects pages in our site will follow smallstep’s home page layout. How soon can this idea be developed?

[tfsojon]

@tfsojon I already talked to Sharif. He said he will ask you to work on the website without pausing the work, going forward. Hope you got that update?

I couldn't communicate with him. I'll talk to him today.

[tfsojon]

@tfsojon If strapi kind of effects/animation is going to take too much time for you to figure out and develop, how about these two sites reference?

https://smallstep.com/ https://katalon.com/

I am thinking of having layouts, animations, effects similar to those two sites. Idea for layout is, our site’s Home page would have combination of both the above sites , and the projects pages in our site will follow smallstep’s home page layout. How soon can this idea be developed?

Ok, will do. But, it would be better if you make an layout-outline with the sections you wanted.

[devopstoday11]

@tfsojon If strapi kind of effects/animation is going to take too much time for you to figure out and develop, how about these two sites reference?
https://smallstep.com/ https://katalon.com/
I am thinking of having layouts, animations, effects similar to those two sites. Idea for layout is, our site’s Home page would have combination of both the above sites , and the projects pages in our site will follow smallstep’s home page layout. How soon can this idea be developed?

Ok, will do. But, it would be better if you make an layout-outline with the sections you wanted.

ok, I will draw some on a paper and send you.

[devopstoday11]

@tfsojon, I found this javascript lib for animation effects. Check this library and see if you can use it to build the effects I asked for above that are similar to the Strapi website.

https://threejs.org/ - This is the lib. You can find examples on this page.
https://github.com/mrdoob/three.js/
https://www.youtube.com/watch?v=0fYi8SGA20k -- watch a few minutes at the beginning of this video to get the feel of three.js
https://devdreaming.com/videos/nextjs-tutorial-build-portfolio-tailwind-css-framer-motion -- reference doc and motion effect library - https://github.com/framer/motion
@tfsojon

[devopstoday11]

@tfsojon did you get a chance to look into the Framer-Motion library for effects?

[tfsojon]

Not yet. Just started working from morning. looking into it one by one.

[tfsojon]

@devopstoday11 check http://localhost:1313/scroll-anim/ in local. This is what I did for testing purpose.

[devopstoday11]

@tfsojon, how did you achieve it? Did you use the Framer Motion library or just HTML & CSS?

By the way, the animation looks fine but is not as quiet as the Strapi website animation effect.

And,
If I want to add this animation effect to the text content and image for a page (for example to Compage page), how to do it?

[tfsojon]

Framer Motion can be use with react app.
So the current one made with plain javascript.
Since we can not use GSAP so the animation smoothness is quite hard to achieve.

Let me know in which pages content it's need to implement.

[devopstoday11]

@tfsojon
Could you show me sample by implementing it on Compage page content area? Based on how it renders we can take a final decision.

[devopstoday11]

@tfsojon
I thought these references might be useful to you to enhance the motion effects in Hugo theme based website -

• https://connorrothschild.github.io/v2/post/animate-hugo-academic/
• https://isabella-b.com/today-i-learned-posts/adding-css-animations/
• https://towardsdatascience.com/add-animations-to-your-hugo-academic-site-easily-6aae61b52bd7
• https://blog.albertkuo.me/post/2022-02-19-animating-the-jolla-theme-from-the-postcards-r-package/
• https://github.com/rstudio/blogdown
• https://pkgs.rstudio.com/blogdown/

other example for image processing speed (not sure if it is useful, but just sharing) -

• https://alexlakatos.com/web/2020/07/17/hugo-image-processing/

[tfsojon]

compare to strapi animation with your references, those is nothing like that huge. they are just simple show-hide things.

Strapi used a premium animation library GSAP (which is developed by a group of developers)
To clear my position, currently I'm not able to re-write their exact same animation code.

I take a look on strapi and did this things in our site

• I have to check, where is my scroll position in the page
• I have to check, where is my scroll position in which section in the page
• based on that need to move the same bg-card-image left and right from start to end.
• based on that need to show and hide the specific image in specific section

If you want to go with it,
I can re-arrange the animation a bit (like the shaky image effect)
it's need to work on few more things like responsive and staff like that.

[tfsojon]

We also have our own Image Processing partial.
Image must be webP to optimise the speed.
and webP image generate low resolution images. If you can remember, previously you asked for the high-resolution images.

[devopstoday11]

compare to strapi animation with your references, those is nothing like that huge. they are just simple show-hide things.

Strapi used a premium animation library GSAP (which is developed by a group of developers) To clear my position, currently I'm not able to re-write their exact same animation code.

I take a look on strapi and did this things in our site

• I have to check, where is my scroll position in the page
• I have to check, where is my scroll position in which section in the page
• based on that need to move the same bg-card-image left and right from start to end.
• based on that need to show and hide the specific image in specific section

If you want to go with it, I can re-arrange the animation a bit (like the shaky image effect) it's need to work on few more things like responsive and staff like that.

Show me a sample with Compage page please @tfsojon

[tfsojon]

@devopstoday11

Show me a sample with Compage page please @tfsojon

here it is - 357f6d3

[devopstoday11]

@devopstoday11

Show me a sample with Compage page please @tfsojon

here it is - 357f6d3

@tfsojon
Our actual Image size and background block image size are too small. How can I play with their sizes?

Also, background block is coming from "hp-primary-desktop.svg" file right?
How can I change background block for every row for every image? Because every row have different image and I want to put different background block for every image.

[devopstoday11]

@tfsojon , please respond on the size of the image that I asked in above comment.
explained the issue in this video - https://www.loom.com/share/1cf54639d6d74097a70033bae57da2bb
@tfsojon

[tfsojon]

@devopstoday11

in main.scss file line no 1824

compage.mp4

[devopstoday11]

compare to strapi animation with your references, those is nothing like that huge. they are just simple show-hide things.
Strapi used a premium animation library GSAP (which is developed by a group of developers) To clear my position, currently I'm not able to re-write their exact same animation code.
I take a look on strapi and did this things in our site

• I have to check, where is my scroll position in the page
• I have to check, where is my scroll position in which section in the page
• based on that need to move the same bg-card-image left and right from start to end.
• based on that need to show and hide the specific image in specific section

If you want to go with it, I can re-arrange the animation a bit (like the shaky image effect) it's need to work on few more things like responsive and staff like that.

Show me a sample with Compage page please @tfsojon

@tfsojon , been awhile. Hope you are doing well.
So the sample motion effect you added on Compage page is not good. I think without any motion is good. How can I disable the motion effect and how can I remove the background?

[tfsojon]

remove this codes form themes/delta/layouts/platform/single.html file

remove this classes from themes/delta/layouts/partials/image-and-content-block.html file

change section padding by changing this

[devopstoday11]

@tfsojon , that's a little beyond my skill.
It would be better if you do it and test and submit the PR to my chandu branch, please. @tfsojon

[tfsojon]

done

[devopstoday11]

@tfsojon same issue is on opensource pages and also services page. And a bug is introduced for them now, I am seeing overlapping animation on static images

[devopstoday11]

@tfsojon same issue is on opensource pages and also services page. And a bug is introduced for them now, I am seeing overlapping animation on static images

@tfsojon fixed this?

[devopstoday11]

@tfsojon same issue is on opensource pages and also the services page. And a bug is introduced for them now, I am seeing overlapping animation on static images

@tfsojon When you are fixing the issues on those two, you will notice that I commented opensource and services pages in chandu branch. So, for your testing purpose, you might need to uncomment them. Just FYI.

[tfsojon]

@devopstoday11
Fixed the overlapping issue
#202

@tfsojon same issue is on opensource pages and also services page. And a bug is introduced for them now, I am seeing overlapping animation on static images

@tfsojon fixed this?